| <img id="png"/> |
| <img id="jpeg-high"/> |
| <img id="jpeg-low"/> |
| <img id="webp-high"/> |
| <img id="webp-low"/> |
| <script id="myWorker" type="text/worker"> |
| self.onmessage = function (e) { |
| var offCanvas = new OffscreenCanvas(50, 50); |
| var gl = offCanvas.getContext('webgl'); |
| gl.clearColor(0, 1, 0, 1); |
| gl.clear(gl.COLOR_BUFFER_BIT); |
| |
| offCanvas.convertToBlob() |
| .then(function(blob) { |
| self.postMessage({version: "png", data:blob}); |
| }); |
| |
| offCanvas.convertToBlob({type: "image/jpeg"}) |
| .then(function(blob) { |
| self.postMessage({version: "jpeg-high", data:blob}); |
| }); |
| |
| offCanvas.convertToBlob({type: "image/jpeg", quality: 0.2}) |
| .then(function(blob) { |
| self.postMessage({version: "jpeg-low", data:blob}); |
| }); |
| |
| offCanvas.convertToBlob({type: "image/webp"}) |
| .then(function(blob) { |
| self.postMessage({version: "webp-high", data:blob}); |
| }); |
| |
| offCanvas.convertToBlob({type: "image/webp", quality: 0.2}) |
| .then(function(blob) { |
| |
| self.postMessage({version: "webp-low", data:blob}); |
| }); |
| } |
| </script> |
| <script> |
| if (window.testRunner) { |
| testRunner.waitUntilDone(); |
| } |
| |
| var pngImage = document.getElementById('png'); |
| var jpegImageHigh = document.getElementById('jpeg-high'); |
| var jpegImageLow = document.getElementById('jpeg-low'); |
| var webpImageHigh = document.getElementById('webp-high'); |
| var webpImageLow = document.getElementById('webp-low'); |
| var numTestCount = 5; |
| function imageLoaded() { |
| numTestCount--; |
| if (numTestCount == 0 && window.testRunner) { |
| testRunner.notifyDone(); |
| } |
| } |
| pngImage.addEventListener('load', imageLoaded); |
| jpegImageHigh.addEventListener('load', imageLoaded); |
| jpegImageLow.addEventListener('load', imageLoaded); |
| webpImageHigh.addEventListener('load', imageLoaded); |
| webpImageLow.addEventListener('load', imageLoaded); |
| |
| var workerBlob = new Blob([document.getElementById('myWorker').textContent]); |
| var worker = new Worker(URL.createObjectURL(workerBlob)); |
| worker.addEventListener("message", function(msg) { |
| var blob = msg.data.data; |
| switch (msg.data.version) { |
| case 'png': |
| pngImage.src = URL.createObjectURL(blob); |
| break; |
| case 'jpeg-high': |
| jpegImageHigh.src = URL.createObjectURL(blob); |
| break; |
| case 'jpeg-low': |
| jpegImageLow.src = URL.createObjectURL(blob); |
| break; |
| case 'webp-high': |
| webpImageHigh.src = URL.createObjectURL(blob); |
| break; |
| case 'webp-low': |
| webpImageLow.src = URL.createObjectURL(blob); |
| break; |
| } |
| }); |
| worker.postMessage(""); |
| </script> |
| |