blob: cc8ea5022a01676f62aedbf56aaa3aa42ca3f89f (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
|
// from https://github.com/redgeoff/paste-image
// This code is heavily based on Joel Basada's great work at
// http://joelb.me/blog/2011/code-snippet-accessing-clipboard-images-with-javascript/
export type PasteListener = (image: HTMLImageElement, file: File) => void;
export class PasteImage {
private initialized: boolean = false;
private listeners: PasteListener[] = [];
private listenForPaste() {
window.addEventListener('paste', e => {
this.pasteHandler(e);
});
}
private init() {
if (this.initialized) {
return;
}
this.listenForPaste();
this.initialized = true;
}
private pasteHandler(e) {
if (e.clipboardData && e.clipboardData.items) {
// Get the items from the clipboard
const items = e.clipboardData.items;
// Loop through all items, looking for any kind of image
for (let i = 0; i < items.length; i++) {
if (items[i].type.includes('image')) {
const blob = items[i].getAsFile();
const URLObj = this.getURLObj();
const source = URLObj.createObjectURL(blob);
// The URL can then be used as the source of an image
this.createImage(source, blob);
}
}
}
}
private getURLObj() {
return window.URL || window['webkitURL'];
}
// Creates a new image from a given source
private createImage(source: string, file: File) {
const pastedImage = new Image();
pastedImage.onload = () => {
for (const listener of this.listeners) {
listener(pastedImage, file);
}
};
pastedImage.src = source;
}
public listen(handler: PasteListener) {
this.init();
this.listeners.push(handler);
}
}
|
