Canvas 图像调整大小然后裁剪中心

Question

我想使用 canvas drawImage function 调整大小然后裁剪它的中心部分，需要的动态坐标是什么。

我可以拥有任何分辨率的图像，我想将其调整为固定分辨率，然后裁剪它的中心部分。

Answer 1

您可以使用drawImage 。 即最后一个选项，您指定源点和目标点以抓取图像的一部分，然后将该部分绘制到 canvas。

void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

然后，您只需要获取高度的中心并从中减去您的尺寸，然后绘制完整尺寸。

void ctx.drawImage(image, 0, (height / 2) - size, sWidth, size, dx, dy, dWidth, size);

 const image = new Image(); image.src = 'https://i.picsum.photos/id/315/200/200.jpg?hmac=cE5OEQSh9gvXqkP0fkrmaSbqLfc_KQdDPtH7yBbeuiQ'; const canvas = document.querySelector('canvas'); canvas.width = canvas.height = 300; const ctx = canvas.getContext('2d'); function cropMiddle(image, size) { const height = image.height; const width = image.width; const center = height / 2; ctx.drawImage(image, 0, center - size, width, size, 0, 0, width, size); } // Wait until the image is loaded image.addEventListener('load', () => { cropMiddle(image, 100); });

 <canvas></canvas>