TAG
CSS
JavaScript
Result
Run
License
<div class="wrapper"> <h3 class="subject">Original image</h3> <img src="http://resrc.devdic.com/img/bysize/below_200/01.png" /> <h3 class="subject">New Bitmap in canvas</h3> <canvas id="mycanvas" width="200" height="200"></canvas> </div>
.wrapper { display: grid; grid: "subject1 subject2" "original canvas" / min-content; grid-gap: 0 20px; } .subject:nth-of-type(1) { grid-area: subject1; } .subject:nth-of-type(1) + img { grid-area: original; } .subject:nth-of-type(2) { grid-area: subject2; } .subject:nth-of-type(2) + canvas { grid-area: canvas; }
window.addEventListener("load", function() { const elCanvas = document.getElementById("mycanvas"); const context = elCanvas.getContext("2d"); const elImg = new Image(100, 90); elImg.src = "http://resrc.devdic.com/img/bysize/below_200/01.png"; elImg.onload = function() { Promise.all([ createImageBitmap(elImg, 0, 0, 100, 100), createImageBitmap(elImg, 100, 100, 100, 100) ]).then(aImg => { context.drawImage(aImg[0], 0, 0); aImg[1].close(); if (aImg[1].width) context.drawImage(aImg[1], 50, 50); console.log(`First bitmap width: ${aImg[0].width}`); console.log(`Last bitmap width: ${aImg[1].width}`); }); }; });
Console
expand_less
License
License
by DevDic
Close