transferFromImageBitmap-ToBlob-offscreen.html (2054B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>Canvas's ImageBitmapRenderingContext test</title> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <link rel="help" href="https://html.spec.whatwg.org/multipage/scripting.html#the-imagebitmap-rendering-context"> 7 <script> 8 var width = 10; 9 var height = 10; 10 11 function testCanvas(ctx, r, g, b, a) 12 { 13 var color = ctx.getImageData(5, 5, 1, 1).data; 14 assert_array_equals(color, [r, g, b, a]); 15 } 16 17 promise_test(function() { 18 function transferFromImageBitmapToBlobOffscreen(greenImage) { 19 var bitmapCanvas = new OffscreenCanvas(width,height); 20 var bitmapCtx = bitmapCanvas.getContext('bitmaprenderer'); 21 bitmapCtx.transferFromImageBitmap(greenImage); 22 23 return bitmapCanvas.convertToBlob(); 24 } 25 26 function drawBlobToCanvas(blob) { 27 // Make sure the bitmap renderer canvas is filled correctly. 28 var pngImage = new Image(); 29 var myCanvasToTest = document.createElement('canvas'); 30 myCanvasToTest.width = width; 31 myCanvasToTest.height = height; 32 33 // Wait for the blob img to load. 34 return new Promise(function(resolve) { 35 pngImage.src = URL.createObjectURL(blob); 36 pngImage.onload = function() { 37 var myCtxToTest = myCanvasToTest.getContext('2d'); 38 myCtxToTest.drawImage(pngImage, 0, 0); 39 resolve(myCtxToTest); 40 }; 41 }); 42 } 43 44 var greenCanvas = document.createElement('canvas'); 45 greenCanvas.width = width; 46 greenCanvas.height = height; 47 var greenCtx = greenCanvas.getContext('2d'); 48 greenCtx.fillStyle = '#0f0'; 49 greenCtx.fillRect(0, 0, width, height); 50 51 return createImageBitmap(greenCanvas).then( 52 greenImage => transferFromImageBitmapToBlobOffscreen(greenImage) 53 ).then( 54 blob => drawBlobToCanvas(blob) 55 ).then( 56 ctx => testCanvas(ctx, 0, 255, 0, 255) 57 ); 58 },'Test that convertToBlob works and produce the expected image'); 59 60 </script>