Chromium Code Reviews Chromium Code Reviews
Issue 2035113002:
Implement ImageBitmapOptions resize (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master| OLD | NEW |
|---|---|
| (Empty) | |
| 1 <!DOCTYPE HTML> | |
| 2 <script src="../../resources/testharness.js"></script> | |
| 3 <script src="../../resources/testharnessreport.js"></script> | |
| 4 <script> | |
| 5 function checkNoCrop(imageBitmap) | |
| 6 { | |
| 7 var canvas = document.createElement("canvas"); | |
| 8 canvas.width = 50; | |
| 9 canvas.height = 50; | |
| 10 var ctx = canvas.getContext("2d"); | |
| 11 ctx.clearRect(0, 0, canvas.width, canvas.height); | |
| 12 ctx.drawImage(imageBitmap, 0, 0); | |
| 13 var d = ctx.getImageData(0, 0, 1, 1).data; | |
| 14 assert_array_equals(d, [255, 0, 0, 255], "This pixel should be red."); | |
| 15 console.log(d[0] + " " + d[1] + " " + d[2] + " " + d[3]); | |
| 16 d = ctx.getImageData(39, 0, 1, 1).data; | |
| 17 assert_array_equals(d, [0, 255, 0, 255], "This pixel should be green."); | |
| 18 console.log(d[0] + " " + d[1] + " " + d[2] + " " + d[3]); | |
| 19 d = ctx.getImageData(0, 39, 1, 1).data; | |
| 20 assert_array_equals(d, [0, 0, 255, 255], "This pixel should be blue."); | |
| 21 console.log(d[0] + " " + d[1] + " " + d[2] + " " + d[3]); | |
| 22 d = ctx.getImageData(39, 39, 1, 1).data; | |
| 23 assert_array_equals(d, [0, 0, 0, 255], "This pixel should be black."); | |
| 24 console.log(d[0] + " " + d[1] + " " + d[2] + " " + d[3]); | |
| 25 d = ctx.getImageData(41, 41, 1, 1).data; | |
| 26 assert_array_equals(d, [0, 0, 0, 0], "This pixel should be transparent black ."); | |
| 27 console.log(d[0] + " " + d[1] + " " + d[2] + " " + d[3]); | |
| 28 } | |
| 29 | |
| 30 function checkCrop(imageBitmap) | |
| 31 { | |
| 32 var canvas = document.createElement("canvas"); | |
| 33 canvas.width = 50; | |
| 34 canvas.height = 50; | |
| 35 var ctx = canvas.getContext("2d"); | |
| 36 ctx.clearRect(0, 0, canvas.width, canvas.height); | |
| 37 ctx.drawImage(imageBitmap, 0, 0); | |
| 38 var d = ctx.getImageData(0, 0, 1, 1).data; | |
| 39 assert_array_equals(d, [255, 0, 0, 255], "This pixel should be red."); | |
| 40 d = ctx.getImageData(19, 0, 1, 1).data; | |
| 41 assert_array_equals(d, [0, 255, 0, 255], "This pixel should be green."); | |
| 42 d = ctx.getImageData(0, 19, 1, 1).data; | |
| 43 assert_array_equals(d, [0, 0, 255, 255], "This pixel should be blue."); | |
| 44 d = ctx.getImageData(19, 19, 1, 1).data; | |
| 45 assert_array_equals(d, [0, 0, 0, 255], "This pixel should be black."); | |
| 46 d = ctx.getImageData(21, 21, 1, 1).data; | |
| 47 assert_array_equals(d, [0, 0, 0, 0], "This pixel should be transparent black ."); | |
| 48 } | |
| 49 | |
| 50 function compareBitmaps(bitmap1, bitmap2) | |
| 51 { | |
| 52 var canvas1 = document.createElement("canvas"); | |
| 53 var canvas2 = document.createElement("canvas"); | |
| 54 canvas1.width = 50; | |
| 55 canvas1.height = 50; | |
| 56 canvas2.width = 50; | |
| 57 canvas2.height = 50; | |
| 58 var ctx1 = canvas1.getContext("2d"); | |
| 59 var ctx2 = canvas2.getContext("2d"); | |
| 60 ctx1.clearRect(0, 0, canvas1.width, canvas1.height); | |
| 61 ctx2.clearRect(0, 0, canvas2.width, canvas2.height); | |
| 62 ctx1.drawImage(bitmap1, 0, 0); | |
| 63 ctx2.drawImage(bitmap2, 0, 0); | |
| 64 var data1 = ctx1.getImageData(0, 0, 50, 50).data; | |
| 65 var data2 = ctx2.getImageData(0, 0, 50, 50).data; | |
| 66 var dataMatched = true; | |
| 67 for (var i = 0; i < data1.length; i++) { | |
| 68 if (data1[i] != data2[i]) { | |
| 69 dataMatched = false; | |
| 70 break; | |
| 71 } | |
| 72 } | |
| 73 assert_false(dataMatched); | |
| 74 } | |
| 75 | |
| 76 function testImageBitmap(source) | |
| 77 { | |
| 78 var imageBitmaps = {}; | |
|
jbroman
2016/07/07 21:21:45
nit: this variable is now unused
xidachen
2016/07/13 14:50:22
Done.
| |
| 79 return Promise.all([ | |
| 80 createImageBitmap(source, {resizeWidth: 40, resizeHeight: 40, resizeQual ity: "high"}), | |
| 81 createImageBitmap(source, {resizeWidth: 40, resizeHeight: 40, resizeQual ity: "medium"}), | |
| 82 createImageBitmap(source, {resizeWidth: 40, resizeHeight: 40, resizeQual ity: "low"}), | |
| 83 createImageBitmap(source, {resizeWidth: 40, resizeHeight: 40, resizeQual ity: "pixelated"}), | |
| 84 createImageBitmap(source, 10, 10, 20, 20, {resizeWidth: 40, resizeHeight : 40, resizeQuality: "high"}), | |
| 85 createImageBitmap(source, 10, 10, 20, 20, {resizeWidth: 40, resizeHeight : 40, resizeQuality: "medium"}), | |
| 86 createImageBitmap(source, 10, 10, 20, 20, {resizeWidth: 40, resizeHeight : 40, resizeQuality: "low"}), | |
| 87 createImageBitmap(source, 10, 10, 20, 20, {resizeWidth: 40, resizeHeight : 40, resizeQuality: "pixelated"}), | |
| 88 ]).then(([noCropHigh, noCropMedium, noCropLow, noCropPixelated, cropHigh, cr opMedium, cropLow, cropPixelated]) => { | |
| 89 checkNoCrop(noCropHigh); | |
| 90 checkNoCrop(noCropMedium); | |
| 91 checkNoCrop(noCropLow); | |
| 92 checkNoCrop(noCropPixelated); | |
| 93 checkCrop(cropHigh); | |
| 94 checkCrop(cropMedium); | |
| 95 checkCrop(cropLow); | |
| 96 checkCrop(cropPixelated); | |
| 97 // Brute-force comparison among all bitmaps is too expensive | |
| 98 compareBitmaps(noCropHigh, noCropMedium); | |
| 99 compareBitmaps(noCropLow, noCropPixelated); | |
| 100 compareBitmaps(cropHigh, cropMedium); | |
| 101 compareBitmaps(cropLow, cropPixelated); | |
| 102 }); | |
| 103 } | |
| 104 | |
| 105 function initializeTestCanvas() | |
| 106 { | |
| 107 var testCanvas = document.createElement("canvas"); | |
| 108 testCanvas.width = 20; | |
| 109 testCanvas.height = 20; | |
| 110 var testCtx = testCanvas.getContext("2d"); | |
| 111 testCtx.fillStyle = "rgb(255, 0, 0)"; | |
| 112 testCtx.fillRect(0, 0, 10, 10); | |
| 113 testCtx.fillStyle = "rgb(0, 255, 0)"; | |
| 114 testCtx.fillRect(10, 0, 10, 10); | |
| 115 testCtx.fillStyle = "rgb(0, 0, 255)"; | |
| 116 testCtx.fillRect(0, 10, 10, 10); | |
| 117 testCtx.fillStyle = "rgb(0, 0, 0)"; | |
| 118 testCtx.fillRect(10, 10, 10, 10); | |
| 119 return testCanvas; | |
| 120 } | |
| 121 | |
| 122 // Blob | |
| 123 promise_test(function() { | |
| 124 return new Promise((resolve, reject) => { | |
| 125 var xhr = new XMLHttpRequest(); | |
| 126 xhr.open("GET", 'resources/pattern.png'); | |
| 127 xhr.responseType = 'blob'; | |
| 128 xhr.send(); | |
| 129 xhr.onload = function() { | |
| 130 resolve(xhr.response); | |
| 131 }; | |
| 132 }).then(testImageBitmap); | |
| 133 }, 'createImageBitmap from a Blob with resize option.'); | |
| 134 | |
| 135 // HTMLCanvasElement | |
| 136 promise_test(function() { | |
| 137 var testCanvas = initializeTestCanvas(); | |
| 138 return testImageBitmap(testCanvas); | |
| 139 }, 'createImageBitmap from a HTMLCanvasElement with resize option.'); | |
| 140 | |
| 141 // HTMLImageElement | |
| 142 promise_test(function() { | |
| 143 return new Promise((resolve, reject) => { | |
| 144 var image = new Image(); | |
| 145 image.onload = function() { | |
| 146 resolve(image); | |
| 147 } | |
| 148 image.src = 'resources/pattern.png' | |
| 149 }).then(testImageBitmap); | |
| 150 }, 'createImageBitmap from a HTMLImageElement with resize option.'); | |
| 151 | |
| 152 // ImageBitmap | |
| 153 promise_test(function() { | |
| 154 var testCanvas = initializeTestCanvas(); | |
| 155 return createImageBitmap(testCanvas).then(testImageBitmap); | |
| 156 }, 'createImageBitmap from an ImageBitmap with resize option.'); | |
| 157 </script> | |
| OLD | NEW |
