Холст к изображению. Base64 не отображается

Question

привет, привет.

Я вырезал изображение. После рисования это на холсте. Но когда я пытаюсь превратить холст в изображение через:

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