html - canvas drawImage upscale and then crop -


using drawimage, trying following image 1280x720...

  • upscale 1920x1080
  • crop 600x1080 remains centre

enter image description here

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

Popular posts from this blog

python - Operations inside variables -

Generic Map Parameter java -

arrays - What causes a java.lang.ArrayIndexOutOfBoundsException and how do I prevent it? -