How to resize then crop an image with canvas
Solution 1:
From the documentation, these are the parameters for drawImage
:
drawImage(image,
sx, sy, sw, sh,
dx, dy, dw, dh);
So, to crop the outer 10 pixels from the source image (Assuming it's 100 * 50
), and then to scale that up to 160*60
:
ctx.drawImage(image,
10, 10, // Start at 10 pixels from the left and the top of the image (crop),
80, 30, // "Get" a `80 * 30` (w * h) area from the source image (crop),
0, 0, // Place the result at 0, 0 in the canvas,
160, 60); // With as width / height: 160 * 60 (scale)
Example:
const image = new Image(),
canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d');
image.src = 'https://i.stack.imgur.com/I4jXc.png';
image.addEventListener('load', () => {
ctx.drawImage(image,
70, 20, // Start at 70/20 pixels from the left and the top of the image (crop),
50, 50, // "Get" a `50 * 50` (w * h) area from the source image (crop),
0, 0, // Place the result at 0, 0 in the canvas,
100, 100); // With as width / height: 100 * 100 (scale)
});
Image: <br/>
<img src="https://i.stack.imgur.com/I4jXc.png" /><br/>
Canvas: <br/>
<canvas id="canvas" width="275px" height="95px"></canvas>
Solution 2:
Before drawing onto the canvas, specify the final canvas size with canvas.width and canvas.height otherwise the final will always be 300x150