| <!DOCTYPE html> |
| <script src="../../resources/js-test.js"></script> |
| <script> |
| jsTestIsAsync = true; |
| |
| description("Tests that createImageBitmap from a canvas.toBlob object should have the same pixel data as the blob."); |
| |
| var imageData2; |
| var imageData3; |
| |
| var canvas1 = document.createElement("canvas"); |
| var ctx1 = canvas1.getContext("2d"); |
| ctx1.fillStyle = "#FF0000"; |
| ctx1.fillRect(0, 0, 300, 150); |
| |
| var newImg = new Image(); |
| newImg.onload = function() { |
| var canvas3 = document.createElement("canvas"); |
| var ctx3 = canvas3.getContext("2d"); |
| ctx3.drawImage(newImg, 0, 0, 300, 150); |
| |
| imageData3 = ctx3.getImageData(0, 0, 300, 150).data; |
| var imageMatched = true; |
| for (var i = 1; i < imageData2.length; i++) { |
| if (imageData2[i] != imageData3[i]) { |
| imageMatched = false; |
| break; |
| } |
| } |
| if (imageMatched) |
| testPassed("image data from the created ImageBitmap and the originated blob is the same"); |
| else |
| testFailed("image data from the created ImageBitmap and the originated blob is NOT the same"); |
| finishJSTest(); |
| } |
| |
| canvas1.toBlob(function(blob) { |
| createImageBitmap(blob).then(imageBitmap => { |
| var canvas2 = document.createElement("canvas"); |
| var ctx2 = canvas2.getContext("2d"); |
| ctx2.drawImage(imageBitmap, 0, 0, 300, 150); |
| imageData2 = ctx2.getImageData(0, 0, 300, 150).data; |
| url = URL.createObjectURL(blob); |
| newImg.src = url; |
| }); |
| }); |
| </script> |
