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

aelbi1ox  于 2023-05-11  发布在  Go
关注(0)|答案(2)|浏览(135)

我找了很长时间的解决办法,但我找不到任何。有没有可能从剪贴板上传图片到服务器上的文件(按ctrl+v)?它可以用于Chrome。
使用PHP,Javascript,jquery,或者其他?Chrome的一些外部扩展?
多谢了。

fcg9iug3

fcg9iug31#

您可以尝试:
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编码的图像发送到服务器。在服务器端,您可以解码它并写入文件。
注意:如果您在浏览器内复制图像(从其他选项卡或窗口),则此操作有效。从桌面复制图像时不起作用。

bnl4lu3b

bnl4lu3b2#

这是一个angular2 typescript的例子,适用于我的项目。希望能帮到别人。其他案件的逻辑也是一样的。

  1. angular-clipboard-event.html
<textarea placeholder="Type a message" (paste)="onPaste($event)"></textarea>
<!-- Place to render the image -->
<img #imgRenderer />
  1. 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

相关问题