使用 HTML5 画布调整图像大小

Question

I am trying to size an image with canvas. My goal is to have an image of dimensions A x B sized to M x N without changing proportions - like CSS contain. For example, if the source image is 1000x1000 and the destination is 400x300, it should cut off a piece 100 pixels toll at the bottom, and that should correspond to 250 pixels in the source image.

My code is below:

const canvas = document.createElement('canvas');
const img = new Image();
img.src = promotedImage;
const FINAL_WIDTH = 400;
const FINAL_HEIGHT = 250;
const width = img.width;
const height = img.height;
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0, width, height, 0, 0, FINAL_WIDTH, FINAL_HEIGHT);
const finalImage = b64toFile(canvas.toDataURL("image/jpg"));

This is not working, like I want to, though. I am obviously using drawImage incorrectly. For me, if copies source to destination without sizing.

Is this because I need to size (change dimensions) for canvas prior to drawing? Please advise.

I have also tried something like Mozilla image upload . It does even scale the image, but it does not crop. Plus, it sizes a source square to the smaller target side, instead of clipping it.

Answer 1

Setting an image source is asynchronous, can be very fast, but often not fast enough to keep up with still-running code. Generally, to make them work reliably, you set an onload handler first and then set src . The canvas element defaults to 300x150 so would also need to be sized. (Canvas obeys CORS. .crossOrigin = '' sets us as anonymous and imgur has a permissive CORS policy. We wouldn't be able to convert the canvas to an image while using a third-party image in this snippet otherwise.)

 const MAX_WIDTH = 400; const MAX_HEIGHT = 300; const img = new Image(); img.crossOrigin = ''; img.onload = () => { const wRatio = MAX_WIDTH / img.width; const hRatio = MAX_HEIGHT / img.height; var width, height; if(wRatio > hRatio) { width = MAX_WIDTH; height = wRatio * img.height; } else { width = hRatio * img.width; height = MAX_HEIGHT; } const canvas = document.createElement('canvas'); canvas.width = width; canvas.height = height; const ctx = canvas.getContext('2d'); ctx.drawImage(img, 0, 0, width, height); //const finalImage = b64toFile(canvas.toDataURL("image/jpg")); const imgElement = document.createElement('img'); imgElement.src = canvas.toDataURL('image/jpg'); document.body.appendChild(imgElement); }; img.src = 'https://i.imgur.com/TMeawxt.jpeg';

 img { border: 1px solid red; }