image-orientation-none-cross-origin-canvas.html (3248B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Images Module Level 3: image-orientation: none</title> 6 <script src=/common/get-host-info.sub.js></script> 7 <link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org"> 8 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5165"> 9 <link rel="match" href="reference/image-orientation-none-cross-origin-canvas-ref.html"> 10 <style> 11 img {display: none} 12 canvas { 13 width: 20px; 14 height: 20px; 15 margin: 10px; 16 } 17 </style> 18 <script> 19 const src1 = 'support/exif-orientation-1-ul.jpg'; 20 const src2 = 'support/exif-orientation-3-lr.jpg'; 21 function toCors(src) { 22 return src.replace(new URL(src).origin, get_host_info().HTTP_REMOTE_ORIGIN) 23 } 24 function createImage({cors, src, orientation, shouldBeRotated}) { 25 const img = document.createElement('img'); 26 img.src = src 27 if (cors) 28 img.src = toCors(img.src) 29 img.style.imageOrientation = orientation 30 img.style.display = 'none' 31 img.dataset.shouldBeRotated = shouldBeRotated 32 document.body.appendChild(img) 33 return img 34 } 35 36 window.onload = () => { 37 const images = [ 38 createImage({cors: true, src: src1, orientation: 'from-image', shouldBeRotated: false}), 39 createImage({cors: true, src: src1, orientation: 'none', shouldBeRotated: false}), 40 createImage({cors: true, src: src2, orientation: 'from-image', shouldBeRotated: true}), 41 createImage({cors: true, src: src2, orientation: 'none', shouldBeRotated: true}), 42 createImage({cors: false, src: src1, orientation: 'from-image', shouldBeRotated: false}), 43 createImage({cors: false, src: src1, orientation: 'none', shouldBeRotated: false}), 44 createImage({cors: false, src: src2, orientation: 'from-image', shouldBeRotated: true}), 45 createImage({cors: false, src: src2, orientation: 'none', shouldBeRotated: false}), 46 ] 47 48 const dimension = 1 49 50 images.forEach(image => { 51 const canvas = document.createElement('canvas') 52 canvas.width = canvas.height = dimension 53 // The source of image-orientation preference for canvas drawImage 54 // is currently not standardized. 55 // See https://github.com/w3c/csswg-drafts/issues/4666 56 canvas.style.imageOrientation = image.style.imageOrientation 57 document.body.appendChild(canvas) 58 const ctx = canvas.getContext('2d') 59 const sx = image.dataset.shouldBeRotated === 'true' ? image.width * .8 : 0 60 const sy = image.dataset.shouldBeRotated === 'true' ? image.height * .8 : 0 61 ctx.drawImage(image, sx, sy, 1, 1, 0, 0, dimension, dimension) 62 }) 63 } 64 65 </script> 66 </head> 67 <body> 68 <p>You should see 8 green rectangles, no red.</p> 69 </body> 70 <script> 71 [src1, src2].forEach(src => { 72 const img = document.createElement('img') 73 img.src = src 74 const imgCors = document.createElement('img') 75 imgCors.src = src 76 imgCors.src = toCors(imgCors.src) 77 document.body.appendChild(img) 78 document.body.appendChild(imgCors) 79 }) 80 </script> 81 </html>