使用 HTML5 畫布調整圖像大小

Question

我正在嘗試用畫布調整圖像的大小。 我的目標是在不改變比例的情況下將尺寸為 A x B 的圖像調整為 M x N - 就像 CSS 包含一樣。 例如，如果源圖像是1000x1000，目標是400x300，它應該在底部切掉一塊100像素的toll，這應該對應源圖像中的250像素。

我的代碼如下：

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"));

但是，這不起作用，就像我想要的那樣。 我顯然錯誤地使用了 drawImage。 對我來說，如果將源復制到目標而不調整大小。

這是因為我需要在繪圖之前調整畫布的尺寸（更改尺寸）嗎？ 請指教。

我也嘗試過類似Mozilla image upload 的東西。 它甚至可以縮放圖像，但不會裁剪。 另外，它將源方塊調整為較小的目標側，而不是剪裁它。

Answer 1

設置圖像源是異步的，可以非常快，但通常不足以跟上仍在運行的代碼。 通常，為了使它們可靠地工作，您首先設置一個onload處理程序，然后設置src 。 畫布元素默認為 300x150，因此也需要調整大小。 （畫布遵守.crossOrigin = ''將我們設置為匿名，而 imgur 有一個寬松的 CORS 策略。否則，在此代碼段中使用第三方圖像時，我們將無法將畫布轉換為圖像。）

 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; }