0
69
ViewsSetting Image Size inside Canvas with JS
Hello Everyone,
So there is a HTML Canvas with photo editing tool. Which looks like this -
<div class="col-md-12 col-lg-8 col-sm-12" id="mainDiv">
<div
id="canvas1Div"
data-toggle="tooltip"
title=""
data-original-title="Image Processing Area"
>
<canvas id="canvas1" width="564" height="488"> </canvas>
</div>
<div
id="canvasDiv"
data-toggle="tooltip"
data-original-title=""
title=""
style="border: 0px;"
>
<canvas id="canvas3" width="188" height="240"> </canvas>
<canvas
id="canvas4"
width="188"
height="240"
style="width: 188px; height: 240px;"
> </canvas>
</div>
</div>
So could it be possilbe with JavaScript that the photo I choose can fit to the center part of the canvas (colorfull borders) by executing it on the console of the browser?
Thank you.
·
Juan Pablo Isaza
1 answers
Answer question0
Try adding the image on the canvas using this approach:
ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
sx,sy,sWidth&sHeightare used for cropping the imagedx,dy,dWidth&dHeightare used for positioning the image within the canvas. These arguments should correlate with your desired rect position and size.
To learn more on this checkout this link: CanvasRenderingContext2D.drawImage()
Edit
Use the native Image class to import any image from your pc:
const image = new Image(width, height);
// render image on canvas when it‘s done loading
image.onload = () => ctx.drawImage(image, …);
// load the image
image.src = './path/to/image.png';
·
Juan Pablo Isaza
Report
Answer question