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</h3> <canvas id="mycanvas" width="110" height="110"></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() { createImageBitmap(elImg, 100, 100, 100, 100) .then(img => { context.drawImage(img, 0, 0); console.log(`width: ${img.width}`); console.log(`height: ${img.height}`); }); }; });
Console
expand_less
License
License
by DevDic
Close