Implement convertToBlob() in OffscreenCanvas

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>
+