粘贴后绘制图像

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