html - canvas drawImage upscale and then crop -
using drawimage, trying following image 1280x720...
- upscale 1920x1080
- crop 600x1080 remains centre
i have far...
var canvas=document.getelementbyid("canvas"); var ctx=canvas.getcontext("2d"); img=new image(); img.onload=function(){ canvas.width=1920; canvas.height=1080; ctx.drawimage(img,0,0,img.width,img.height,0,0,1920,1080); } img.src="https://dummyimage.com/1280x720/000/fff"; //img.src="https://dummyimage.com/1920x1080/000/fff"; body{ background-color: ivory; } canvas{border:1px solid red;} <canvas id="canvas" width=100 height=100></canvas> the upscaling part have got working looking @ crop, have example can see?
is there benefit cropping first before rescaling?
ctx.drawimage(img, 0, 0, img.width, img.height, 0, 0, 1920, 1080);
something that:
x = (img.width - 600) / 2; y = (img.height - 1080) / 2; ctx.drawimage(img, x, y, 600, 1080, 0, 0, 1920, 1080); but check destination area parameters depending on want get.

Comments
Post a Comment