createImageBitmap-exif-orientation.html (7350B)
1 <!DOCTYPE html> 2 <title>Test that createImageBitmap honors EXIF orientation</title> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <style>canvas { outline: 1px solid black; margin-right: 1em; }</style> 6 <body> 7 <script> 8 function loadImage(src) { 9 return new Promise(function(resolve) { 10 const image = new Image(); 11 image.addEventListener("load", () => resolve(image), { once: true }); 12 image.src = src; 13 }); 14 } 15 16 function checkColors(ctx, w, h, tileW, tileH, expectedColors) { 17 let data = ctx.getImageData(0, 0, w, h).data; 18 for (let [row, col, r, g, b, a] of expectedColors) { 19 let x = col * tileW + tileW / 2; 20 let y = row * tileH + tileH / 2; 21 let i = (x + y * w) * 4; 22 23 let expected = [r, g, b, a]; 24 let actual = [data[i], data[i + 1], data[i + 2], data[i + 3]]; 25 26 assert_array_approx_equals(actual, expected, 1, `Pixel value at (${x},${y}) ${expected} =~ ${actual}.`); 27 } 28 } 29 30 async_test(function(t) { 31 const canvas = document.createElement("canvas"); 32 canvas.width = 320; 33 canvas.height = 160; 34 document.body.append(canvas); 35 36 const ctx = canvas.getContext("2d"); 37 loadImage("resources/squares_6.jpg") 38 .then((image) => createImageBitmap(image)) 39 .then(t.step_func_done(function(imageBitmap) { 40 ctx.drawImage(imageBitmap, 0, 0); 41 checkColors(ctx, canvas.width, canvas.height, 80, 80, [ 42 // row, col, r, g, b, a 43 [0, 0, 255, 0, 0, 255], 44 [0, 1, 0, 255, 0, 255], 45 [0, 2, 0, 0, 255, 255], 46 [0, 3, 0, 0, 0, 255], 47 [1, 0, 255, 128, 128, 255], 48 [1, 1, 128, 255, 128, 255], 49 [1, 2, 128, 128, 255, 255], 50 [1, 3, 128, 128, 128, 255], 51 ]); 52 })); 53 }, "createImageBitmap with EXIF rotation, imageOrientation from-image, and no cropping"); 54 55 async_test(function(t) { 56 const canvas = document.createElement("canvas"); 57 canvas.width = 320; 58 canvas.height = 160; 59 document.body.append(canvas); 60 61 const ctx = canvas.getContext("2d"); 62 loadImage("resources/squares_6.jpg") 63 .then((image) => createImageBitmap(image, { imageOrientation: "flipY" })) 64 .then(t.step_func_done(function(imageBitmap) { 65 ctx.drawImage(imageBitmap, 0, 0); 66 checkColors(ctx, canvas.width, canvas.height, 80, 80, [ 67 // row, col, r, g, b, a 68 [0, 0, 255, 128, 128, 255], 69 [0, 1, 128, 255, 128, 255], 70 [0, 2, 128, 128, 255, 255], 71 [0, 3, 128, 128, 128, 255], 72 [1, 0, 255, 0, 0, 255], 73 [1, 1, 0, 255, 0, 255], 74 [1, 2, 0, 0, 255, 255], 75 [1, 3, 0, 0, 0, 255], 76 ]); 77 })); 78 }, "createImageBitmap with EXIF rotation, imageOrientation flipY, and no cropping"); 79 80 async_test(function(t) { 81 const canvas = document.createElement("canvas"); 82 canvas.width = 160; 83 canvas.height = 160; 84 document.body.append(canvas); 85 86 const ctx = canvas.getContext("2d"); 87 loadImage("resources/squares_6.jpg") 88 .then(image => createImageBitmap(image, 80, 0, 160, 160)) 89 .then(t.step_func_done(function(imageBitmap) { 90 ctx.drawImage(imageBitmap, 0, 0); 91 checkColors(ctx, canvas.width, canvas.height, 80, 80, [ 92 // row, col, r, g, b, a 93 [0, 0, 0, 255, 0, 255], 94 [0, 1, 0, 0, 255, 255], 95 [1, 0, 128, 255, 128, 255], 96 [1, 1, 128, 128, 255, 255], 97 ]); 98 })); 99 }, "createImageBitmap with EXIF rotation, imageOrientation from-image, and cropping"); 100 101 async_test(function(t) { 102 const canvas = document.createElement("canvas"); 103 canvas.width = 160; 104 canvas.height = 160; 105 document.body.append(canvas); 106 107 const ctx = canvas.getContext("2d"); 108 loadImage("resources/squares_6.jpg") 109 .then(image => createImageBitmap(image, 80, 0, 160, 160, { imageOrientation: "flipY" })) 110 .then(t.step_func_done(function(imageBitmap) { 111 ctx.drawImage(imageBitmap, 0, 0); 112 checkColors(ctx, canvas.width, canvas.height, 80, 80, [ 113 // row, col, r, g, b, a 114 [0, 0, 128, 255, 128, 255], 115 [0, 1, 128, 128, 255, 255], 116 [1, 0, 0, 255, 0, 255], 117 [1, 1, 0, 0, 255, 255], 118 ]); 119 })); 120 }, "createImageBitmap with EXIF rotation, imageOrientation flipY, and cropping"); 121 122 async_test(function(t) { 123 const canvas = document.createElement("canvas"); 124 canvas.width = 160; 125 canvas.height = 80; 126 document.body.append(canvas); 127 128 const ctx = canvas.getContext("2d"); 129 loadImage("resources/squares_6.jpg") 130 .then((image) => createImageBitmap(image, { resizeWidth:160, resizeHeight:80} )) 131 .then(t.step_func_done(function(imageBitmap) { 132 ctx.drawImage(imageBitmap, 0, 0); 133 checkColors(ctx, canvas.width, canvas.height, 40, 40, [ 134 // row, col, r, g, b, a 135 [0, 0, 255, 0, 0, 255], 136 [0, 1, 0, 255, 0, 255], 137 [0, 2, 0, 0, 255, 255], 138 [0, 3, 0, 0, 0, 255], 139 [1, 0, 255, 128, 128, 255], 140 [1, 1, 128, 255, 128, 255], 141 [1, 2, 128, 128, 255, 255], 142 [1, 3, 128, 128, 128, 255], 143 ]); 144 })); 145 }, "createImageBitmap with EXIF rotation, imageOrientation from-image, no cropping, and resize"); 146 147 async_test(function(t) { 148 const canvas = document.createElement("canvas"); 149 canvas.width = 80; 150 canvas.height = 80; 151 document.body.append(canvas); 152 153 const ctx = canvas.getContext("2d"); 154 loadImage("resources/squares_6.jpg") 155 .then(image => createImageBitmap(image, 80, 0, 160, 160, { imageOrientation: "flipY", resizeWidth:80, resizeHeight:80 })) 156 .then(t.step_func_done(function(imageBitmap) { 157 ctx.drawImage(imageBitmap, 0, 0); 158 checkColors(ctx, canvas.width, canvas.height, 40, 40, [ 159 // row, col, r, g, b, a 160 [0, 0, 128, 255, 128, 255], 161 [0, 1, 128, 128, 255, 255], 162 [1, 0, 0, 255, 0, 255], 163 [1, 1, 0, 0, 255, 255], 164 ]); 165 })); 166 }, "createImageBitmap with EXIF rotation, imageOrientation flipY, cropping, and resize"); 167 168 async_test(function(t) { 169 const canvas = document.createElement("canvas"); 170 canvas.width = 80; 171 canvas.height = 40; 172 document.body.append(canvas); 173 174 const ctx = canvas.getContext("2d"); 175 loadImage("resources/squares_6.jpg") 176 .then(image => createImageBitmap(image, 80, 0, 160, 160, { imageOrientation: "flipY", resizeWidth:80, resizeHeight:40 })) 177 .then(t.step_func_done(function(imageBitmap) { 178 ctx.drawImage(imageBitmap, 0, 0); 179 checkColors(ctx, canvas.width, canvas.height, 40, 20, [ 180 // row, col, r, g, b, a 181 [0, 0, 128, 255, 128, 255], 182 [0, 1, 128, 128, 255, 255], 183 [1, 0, 0, 255, 0, 255], 184 [1, 1, 0, 0, 255, 255], 185 ]); 186 })); 187 }, "createImageBitmap with EXIF rotation, imageOrientation flipY, cropping, and nonuniform resize"); 188 189 </script>