Chromium Code Reviews Chromium Code Reviews
Issue 1971353002:
Add ImageData-related API to OffscreenCanvasRenderingContext2D (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master| OLD | NEW |
|---|---|
| (Empty) | |
| 1 <!DOCTYPE html> | |
| 2 <html> | |
| 3 <body> | |
| 4 <canvas id='output' width='150' height='150'></canvas> | |
| 5 <script src="../../resources/js-test.js"></script> | |
| 6 <script id='myWorker' type='text/worker'> | |
| 7 function getPrefilledImageData() { | |
| 8 var myImageData = new ImageData(10, 10); | |
| 9 var dataArr = myImageData.data; | |
| 10 for (var i = 0; i < dataArr.length; i+=4) { | |
| 11 dataArr[i + 0] = 255; | |
| 12 dataArr[i + 1] = 100; | |
| 13 dataArr[i + 2] = 0; | |
| 14 dataArr[i + 3] = 255; | |
| 15 } | |
| 16 return myImageData; | |
| 17 } | |
| 18 function postMessageToMain(t, c) { | |
| 19 self.postMessage({topic: t, content: c}); | |
| 20 } | |
| 21 self.onmessage = function(e) { | |
| 22 var aCanvas = new OffscreenCanvas(10, 10); | |
| 23 var ctx = aCanvas.getContext('2d'); | |
| 24 | |
| 25 // createImageData(sx, sy) | |
| 26 try { | |
| 27 var blankImageData = ctx.createImageData(10, 10); | |
| 28 postMessageToMain("createImageData(sx, sy)", blankImageData.data[1]); | |
| 29 } catch (err) { | |
| 30 postMessageToMain("createImageData(sx, sy)", err); | |
| 31 } | |
| 32 | |
| 33 // createImageData(ImageData) | |
| 34 try { | |
| 35 var blankImageData = ctx.createImageData(getPrefilledImageData()); | |
|
ajuma
2016/05/13 15:13:31
This one isn't really blank, right? Would prefille
xlai (Olivia)
2016/05/13 15:22:28
At first I also thought so. But then when I look a
| |
| 36 postMessageToMain('createImageData(ImageData)', blankImageData.data[1]); | |
| 37 } catch (err) { | |
| 38 postMessageToMain('createImageData(ImageData)', err); | |
| 39 } | |
| 40 | |
| 41 // getImageData(sx, sy, sw, sh) | |
| 42 try { | |
| 43 ctx.fillStyle = "blue"; | |
| 44 ctx.fillRect(2, 0, 3, 1); | |
| 45 var imageDataFromCanvas = ctx.getImageData(2, 0, 3, 1); | |
| 46 postMessageToMain('getImageData(sx, sy, sw, sh)', imageDataFromCanvas.da ta[2]); | |
| 47 } catch (err) { | |
| 48 postMessageToMain('getImageData(sx, sy, sw, sh)', err); | |
| 49 } | |
| 50 | |
| 51 // putImageData(ImageData, dx, dy) | |
| 52 try { | |
| 53 ctx.putImageData(getPrefilledImageData(), 0, 0); | |
| 54 var imageDataFromCanvas = ctx.getImageData(0, 0, 1, 1); | |
| 55 postMessageToMain("putImageData(ImageData, dx, dy)", imageDataFromCanvas .data[1]); | |
| 56 } catch (err) { | |
| 57 postMessageToMain("putImageData(ImageData, dx, dy)", err); | |
| 58 } | |
| 59 | |
| 60 // putImageData(ImageData, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight) | |
| 61 ctx.clearRect(0, 0, aCanvas.width, aCanvas.height); | |
| 62 try { | |
| 63 ctx.putImageData(getPrefilledImageData(), 0, 0, 3, 0, 1, 1); | |
| 64 var imageDataFromCanvas = ctx.getImageData(3, 0, 1, 1); | |
| 65 postMessageToMain("putImageData(ImageData, dx, dy, dirtyX, dirtyY, dirty Width, dirtyHeight)", imageDataFromCanvas.data[1]); | |
| 66 } catch (err) { | |
| 67 postMessageToMain("putImageData(ImageData, dx, dy, dirtyX, dirtyY, dirty Width, dirtyHeight) failed: ", err); | |
| 68 } | |
| 69 | |
| 70 postMessageToMain("", ""); | |
| 71 }; | |
| 72 </script> | |
| 73 <script> | |
| 74 if (window.testRunner) { | |
| 75 testRunner.waitUntilDone(); | |
| 76 } | |
| 77 | |
| 78 var blob = new Blob([document.getElementById('myWorker').textContent]); | |
| 79 var worker = new Worker(URL.createObjectURL(blob)); | |
| 80 worker.addEventListener('message', msg => { | |
| 81 var data = msg.data; | |
| 82 switch (data.topic) { | |
| 83 case "createImageData(sx, sy)": | |
| 84 if (data.content == "0") | |
| 85 testPassed("createImageData(sx, sy) creates blank image correctly" ); | |
| 86 else | |
| 87 testFailed("createImageData(ImageData) failed: " + data.content); | |
| 88 break; | |
| 89 case "createImageData(ImageData)": | |
| 90 if (data.content == "0") | |
|
ajuma
2016/05/13 15:13:31
Should this be "100" since the ImageData is coming
xlai (Olivia)
2016/05/13 15:22:28
Same reason as above. This function is creating a
| |
| 91 testPassed("createImageData(ImageData) creates blank image correct ly"); | |
| 92 else | |
| 93 testFailed("createImageData(ImageData) failed: " + data.content); | |
| 94 break; | |
| 95 case "getImageData(sx, sy, sw, sh)": | |
| 96 if (data.content == "255") | |
| 97 testPassed("getImageData(sx, sy, sw, sh) is successful."); | |
| 98 else | |
| 99 testFailed("getImageData(sx, sy, sw, sh) failed: " + data.content) ; | |
| 100 break; | |
| 101 case "putImageData(ImageData, dx, dy)": | |
| 102 if (data.content == "100") | |
| 103 testPassed("putImageData(ImageData, dx, dy) is successful."); | |
| 104 else | |
| 105 testFailed("putImageData(ImageData, dx, dy) failed: " + data.conte nt); | |
| 106 break; | |
| 107 case "putImageData(ImageData, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHei ght)": | |
| 108 if (data.content == "100") | |
| 109 testPassed("putImageData(ImageData, dx, dy, dirtyX, dirtyY, dirtyW idth, dirtyHeight) is successful."); | |
| 110 else | |
| 111 testFailed("putImageData(ImageData, dx, dy, dirtyX, dirtyY, dirtyW idth, dirtyHeight) failed: " + data.content); | |
| 112 break; | |
| 113 default: | |
| 114 if (window.testRunner) { | |
| 115 testRunner.notifyDone(); | |
| 116 } | |
| 117 break; | |
| 118 } | |
| 119 }); | |
| 120 worker.postMessage(""); | |
| 121 | |
| 122 </script> | |
| 123 </body> | |
| 124 | |
| OLD | NEW |
