<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);
}
}
2条答案
按热度按时间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编码的图像发送到服务器。在服务器端,您可以解码它并写入文件。
注意:如果您在浏览器内复制图像(从其他选项卡或窗口),则此操作有效。从桌面复制图像时不起作用。
bnl4lu3b2#
这是一个angular2 typescript的例子,适用于我的项目。希望能帮到别人。其他案件的逻辑也是一样的。
下面是一个实时实现:
https://stackblitz.com/edit/angular-f7kcny?file=app/app.component.ts