Question

我看了很长时间才找到解决方案，但我找不到任何解决方案。是否有可能将图片从剪贴板上传到服务器上的文件（按ctrl + v）？它适用于Chrome。

使用PHP，Javascript，jquery，还是其他？ chrome的一些外部扩展？

非常感谢。

Answer 1

您可以尝试：

https://github.com/layerssss/paste.js

或

关于粘贴事件和剪贴板API

http://www.w3schools.com/jsref/event_onpaste.asp

https://www.w3.org/TR/clipboard-apis/

How does the paste image from clipboard functionality work in Gmail and Google Chrome 12+?

在javascript中获取图像后，您可以使用AJAX将base64编码的图像发送到服务器。在服务器端，您可以对其进行解码并写入文件。

注意：如果您在浏览器中复制图像（从其他选项卡或窗口），则此方法有效。从桌面复制图像时，它不起作用。

Answer 2

这来自适用于我的项目的angular2打字稿示例。希望它可以帮助某人。其他情况的逻辑也一样。

angular-clipboard-event.html

<textarea placeholder="Type a message" (paste)="onPaste($event)"></textarea>
<!-- Place to render the image -->
<img #imgRenderer />

angular-clipboard-event.ts

// Reference to the dom element
@ViewChild('imgRenderer') imgRenderer: ElementRef;

onPaste(event: any) {
    const items = (event.clipboardData || event.originalEvent.clipboardData).items;
    let blob = null;

    for (const item of items) {
      if (item.type.indexOf('image') === 0) {
        blob = item.getAsFile();
      }
    }

    // load image if there is a pasted image
    if (blob !== null) {
      const reader = new FileReader();
      reader.onload = (evt: any) => {
        console.log(evt.target.result); // data url!
        this.imgRenderer.nativeElement.src = evt.target.result;
      };
      reader.readAsDataURL(blob);
    }
  }

这是一个实时实施：

https://stackblitz.com/edit/angular-f7kcny?file=app/app.component.ts

从剪贴板上传图片到服务器

2 个答案: