画布到图像。 Base64未显示

时间:2018-05-05 11:59:40

标签: javascript html canvas

嗨。

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

User.in(gender: gender_group).between(dob: 18..30)

我什么都没得到。图像不会显示。

HTML

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

}

我做错了什么?

1 个答案:

答案 0 :(得分: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")
  }
}