| OLD | NEW |
| (Empty) |
| 1 <img id="png"/> | |
| 2 <img id="jpeg-high"/> | |
| 3 <img id="jpeg-low"/> | |
| 4 <img id="webp-high"/> | |
| 5 <img id="webp-low"/> | |
| 6 <script type="text/javascript"> | |
| 7 if (window.testRunner) { | |
| 8 testRunner.waitUntilDone(); | |
| 9 } | |
| 10 | |
| 11 var pngImage = document.getElementById('png'); | |
| 12 var jpegImageHigh = document.getElementById('jpeg-high'); | |
| 13 var jpegImageLow = document.getElementById('jpeg-low'); | |
| 14 var webpImageHigh = document.getElementById('webp-high'); | |
| 15 var webpImageLow = document.getElementById('webp-low'); | |
| 16 var numTestCount = 5; | |
| 17 function imageLoaded() { | |
| 18 numTestCount--; | |
| 19 if (numTestCount == 0 && window.testRunner) { | |
| 20 window.testRunner.notifyDone(); | |
| 21 } | |
| 22 } | |
| 23 pngImage.addEventListener('load', imageLoaded); | |
| 24 jpegImageHigh.addEventListener('load', imageLoaded); | |
| 25 jpegImageLow.addEventListener('load', imageLoaded); | |
| 26 webpImageHigh.addEventListener('load', imageLoaded); | |
| 27 webpImageLow.addEventListener('load', imageLoaded); | |
| 28 | |
| 29 var offCanvas = new OffscreenCanvas(50, 50); | |
| 30 var offctx = offCanvas.getContext('2d'); | |
| 31 offctx.fillStyle = "red"; | |
| 32 offctx.fillRect(0, 0, 25, 25); | |
| 33 offctx.fillStyle = "green"; | |
| 34 offctx.fillRect(25, 0, 25, 25); | |
| 35 offctx.fillStyle = "blue"; | |
| 36 offctx.fillRect(0, 25, 25, 25); | |
| 37 offctx.fillStyle = "black"; | |
| 38 offctx.fillRect(25, 25, 25, 25); | |
| 39 offctx.strokeStyle = "yellow"; | |
| 40 offctx.strokeRect(0, 0, 50, 50); | |
| 41 | |
| 42 offCanvas.convertToBlob() | |
| 43 .then(function(blob) { | |
| 44 pngImage.src = URL.createObjectURL(blob); | |
| 45 }); | |
| 46 | |
| 47 offCanvas.convertToBlob({type: "image/jpeg"}) | |
| 48 .then(function(blob) { | |
| 49 jpegImageHigh.src = URL.createObjectURL(blob); | |
| 50 }); | |
| 51 | |
| 52 offCanvas.convertToBlob({type: "image/jpeg", quality: 0.2}) | |
| 53 .then(function(blob) { | |
| 54 jpegImageLow.src = URL.createObjectURL(blob); | |
| 55 }); | |
| 56 | |
| 57 offCanvas.convertToBlob({type: "image/webp"}) | |
| 58 .then(function(blob) { | |
| 59 webpImageHigh.src = URL.createObjectURL(blob); | |
| 60 }); | |
| 61 | |
| 62 offCanvas.convertToBlob({type: "image/webp", quality: 0.2}) | |
| 63 .then(function(blob) { | |
| 64 webpImageLow.src = URL.createObjectURL(blob); | |
| 65 }); | |
| 66 | |
| 67 </script> | |
| 68 | |
| OLD | NEW |