transferFromImageBitmap-ToBlob-transferControlToOffscreen.html (2206B)
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 = document.createElement('canvas'); 20 bitmapCanvas.width = width; 21 bitmapCanvas.height = height; 22 var offscreenCanvas = bitmapCanvas.transferControlToOffscreen(); 23 var bitmapCtx = offscreenCanvas.getContext('bitmaprenderer'); 24 bitmapCtx.transferFromImageBitmap(greenImage); 25 26 return offscreenCanvas.convertToBlob(); 27 } 28 29 function drawBlobToCanvas(blob) { 30 // Make sure the bitmap renderer canvas is filled correctly. 31 var pngImage = new Image(); 32 var myCanvasToTest = document.createElement('canvas'); 33 myCanvasToTest.width = width; 34 myCanvasToTest.height = height; 35 36 // Wait for the blob img to load. 37 return new Promise(function(resolve) { 38 pngImage.src = URL.createObjectURL(blob); 39 pngImage.onload = function() { 40 var myCtxToTest = myCanvasToTest.getContext('2d'); 41 myCtxToTest.drawImage(pngImage, 0, 0); 42 resolve(myCtxToTest); 43 }; 44 }); 45 } 46 47 var greenCanvas = document.createElement('canvas'); 48 greenCanvas.width = width; 49 greenCanvas.height = height; 50 var greenCtx = greenCanvas.getContext('2d'); 51 greenCtx.fillStyle = '#0f0'; 52 greenCtx.fillRect(0, 0, width, height); 53 54 return createImageBitmap(greenCanvas).then( 55 greenImage => transferFromImageBitmapToBlobOffscreen(greenImage) 56 ).then( 57 blob => drawBlobToCanvas(blob) 58 ).then( 59 ctx => testCanvas(ctx, 0, 255, 0, 255) 60 ); 61 },'Test that convertToBlob works and produce the expected image'); 62 63 </script>