从Buffer / Blob加载图像

时间:2018-04-14 21:41:59

标签: javascript typescript buffer blob electron

我正试图从电子剪贴板中取出一幅图像,并将其放在画布上。

在电子主过程中,我有这个由菜单项触发的功能。如果我将img.toBitmap().toString()写入控制台,则会输出图像数据,因此我知道那里有图像。

export function pasteImage() {
  let img = clipboard.readImage()
  console.log('send paste message')
  mainWindow.webContents.send('paste-image', img.toBitmap())
}

接下来我有这个方法,它接受缓冲区并将其转换为blob。然后它应该将其加载到图像中并将图像绘制到画布上。

public pasteImage(image: Buffer, x: number = 0, y: number = 0) {
  let blob = new Blob([image], { type: 'image/bmp' })
  let url = URL.createObjectURL(blob)
  let img = new Image
  img.addEventListener('load', () => {
    console.log('loaded image')
    this.ctx.drawImage(img, x, y)
    URL.revokeObjectURL(url)
  })
  img.src = url
}

ipcRenderer.addListener('paste-image', (e: EventEmitter, img: Buffer) => {
  let canvas = document.createElement('canvas')
  let layer = new layer(canvas)
  layer.pasteImage(img)
})

我遇到的问题是load事件永远不会被触发,但方法pasteImage(image, x, y)正在执行。

0 个答案:

没有答案