javascript - Canvas 图像。 Base64 不显示

Question

嗨嗨。

我剪切了图像。在 Canvas 中绘制后。但是当我尝试通过以下方式将 Canvas 变成图像时:

crop(image, pixelCrop, fileName) {
  const canvas = document.getElementById('can')
  canvas.width = pixelCrop.width
  canvas.height = pixelCrop.height
  const ctx = canvas.getContext('2d')
  let img = new Image()
  img.src = image.preview
  img.onload = function() {
    console.log(img)
    ctx.drawImage(
      img,
      pixelCrop.x,
      pixelCrop.y,
      pixelCrop.width,
      pixelCrop.height,
      0,
      0,
      pixelCrop.width,
      pixelCrop.height,
    );
  }
  let mage = document.getElementById('img')
  mage.src = canvas.toDataURL("image/png")

}

我没有得到任何东西。图片不显示。

HTML

<canvas id="cnvs"></canvas>
<span>
    <img src="" id="img"/>
</span>

我做错了什么？

Answer 1

crop(image, pixelCrop, fileName) {
  const canvas = document.getElementById('can')
  canvas.width = pixelCrop.width
  canvas.height = pixelCrop.height
  const ctx = canvas.getContext('2d')
  let img = new Image()
  img.src = image.preview
  img.onload = async function() {
    console.log(img)
    await ctx.drawImage(
      img,
      pixelCrop.x,
      pixelCrop.y,
      pixelCrop.width,
      pixelCrop.height,
      0,
      0,
      pixelCrop.width,
      pixelCrop.height,
    );
    let mage = document.getElementById('img')
    mage.src = canvas.toDataURL("image/png")
  }
}