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

Question

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

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

非常感谢.

Answer 1

你可以试试:

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

要么

关于粘贴事件和剪贴板API

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

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

剪贴板功能的粘贴图像如何在Gmail和Google Chrome 12+中运行？

在javascript中获取图像后,您可以使用AJAX将base64编码图像发送到服务器.在服务器端,您可以解码它并写入文件.

注意:如果您在浏览器中复制图像(从其他选项卡或窗口),则此方法有效.从桌面复制图像时它不起作用.

Answer 2

这是来自适用于我的项目的 angular2 打字稿的示例。希望它能帮助某人。其他情况的逻辑也相同。

1. 角度剪贴板事件.html

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

2. 角度剪贴板事件.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