canvas.drawImage 裁剪圖像

Question

您好，我有以下圖片：

尺寸為 750x554

我通過以下方式將 iamge 加載到 img 標簽中：

 <input type="file" accept="image/*"
        onchange="document.getElementById('character').src = window.URL.createObjectURL(this.files[0]);">

      <img id="character" alt="your image" width="100" height="100" />

為了將此圖像轉換為 base64 我使用 canvas 和以下代碼：

  let canvas = document.createElement("canvas");

  canvas.width = img.width
  canvas.height = img.height

  let ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0);

  let dataURL = canvas.toDataURL("image/png");

但是我得到的結果是一個裁剪的圖像，你可以在這里看到

如何解決這個問題，並獲得 base64 中的圖像？

謝謝。

Answer 1

您需要將 canvas 設置為圖像的大小，並且在嘗試繪制之前需要等待圖像實際加載。

 document.querySelector('input').addEventListener('change', function() { const url = window.URL.createObjectURL(this.files[0]); const img = document.getElementById('character'); img.addEventListener('load', function() { let canvas = document.createElement("canvas"); canvas.width = img.naturalWidth; canvas.height = img.naturalHeight; let ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0); let dataURL = canvas.toDataURL("image/png"); // show image const i = new Image(); i.src = dataURL; document.body.appendChild(i); }); img.src = url; });

 <input type="file" accept="image/*"> <img id="character" alt="your image" width="100" height="100" />

Answer 2

我認為這里的問題在於您的圖像標簽，因為您已將圖像的寬度和高度指定為100

<img id="character" alt="your image" width="100" height="100" />

因此，只需為圖像標簽提供實際的高度和寬度，而不是這樣。

快樂編碼！