third_party/WebKit/LayoutTests/virtual/threaded/fast/idleToBlob/OffscreenCanvas-convertToBlob-2d-worker.html

<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 offctx = offCanvas.getContext("2d");
  offctx.fillStyle = "red"; 
  offctx.fillRect(0, 0, 25, 25);
  offctx.fillStyle = "green";
  offctx.fillRect(25, 0, 25, 25);
  offctx.fillStyle = "blue";
  offctx.fillRect(0, 25, 25, 25);
  offctx.fillStyle = "black";
  offctx.fillRect(25, 25, 25, 25);
  offctx.strokeStyle = "yellow";
  offctx.strokeRect(0, 0, 50, 50);

  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) {
    window.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>