粘贴后绘制图像

Question

我开发了一种输入，可以使用CTRL-V在其中粘贴图像。

我使用（复制图像地址）从浏览器复制图像，然后将鼠标置于输入中，然后按ctrl-v粘贴图像。

我可以在base64中获得图像，有没有一种方法可以“绘制/变换”该图像并将其以600/600的高度和宽度放置？

也就是说，在我收到的图像中，我希望它的高度和宽度为600。我尝试使用Canvas实现某些功能，但没有成功。

有人可以帮我吗？

DEMO

代码

  @HostListener("paste", ["$event"])

  onPaste(e: ClipboardEvent) {
    let clipboardData = e.clipboardData || (window as any).clipboardData;
    let pastedData = clipboardData.getData("text");
    console.log(pastedData)
  }

Answer 1

类似这样的事情。您可能需要某种调整大小的工具来防止图像失真，但这通常是您要遵循的路径。我强烈建议您阅读本文结尾处的资源。

  onPaste(e: ClipboardEvent) {
    let clipboardData = e.clipboardData || (window as any).clipboardData;
    let pastedData = clipboardData.getData("text");
    console.log(pastedData)
    let canvas = document.createElement("canvas")
    canvas.height = 600
    canvas.width = 600
    let ctx = canvas.getContext("2d")
    let img = new Image()
    img.onload = ()=>{
      ctx.drawImage( img, 0, 0, 600, 600 )
      pastedData = canvas.toDataURL('image/png')
      console.log(pastedData)
    }
    img.src = pastedData
    img.style.height ='600px'//this is not a good way to resize
    img.style.width = '600px'//high chance of distortion
  }

额外资源：

Resize tool

Drawing Canvas Images