Нарисуйте изображение после вставки

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
  }

Дополнительные ресурсы:

Инструмент изменения размера

Рисование холстов