canvas-img 0.0.1 → 0.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/READMME.md +1 -5
- package/canvas-img.js +9 -32
- package/package.json +1 -1
package/READMME.md
CHANGED
package/canvas-img.js
CHANGED
|
@@ -11,40 +11,14 @@
|
|
|
11
11
|
*/
|
|
12
12
|
|
|
13
13
|
(function () {
|
|
14
|
-
function injectHiddenStyle() {
|
|
15
|
-
// random id
|
|
16
|
-
if (document.getElementById("style-3bXfmO7c")) return;
|
|
17
|
-
|
|
18
|
-
const style = document.createElement("style");
|
|
19
|
-
style.id = "style-3bXfmO7c";
|
|
20
|
-
style.textContent = `
|
|
21
|
-
._3bXfmO7c {
|
|
22
|
-
width: 0px;
|
|
23
|
-
height: 0px;
|
|
24
|
-
display: none;
|
|
25
|
-
position: absolute;
|
|
26
|
-
pointer-events: none;
|
|
27
|
-
opacity: 0;
|
|
28
|
-
visibility: hidden;
|
|
29
|
-
}
|
|
30
|
-
`;
|
|
31
|
-
document.head.appendChild(style);
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
injectHiddenStyle();
|
|
35
|
-
|
|
36
|
-
function createHiddenImg(src) {
|
|
37
|
-
const img = document.createElement("img");
|
|
38
|
-
img.className = "_3bXfmO7c";
|
|
39
|
-
document.body.appendChild(img);
|
|
40
|
-
return img;
|
|
41
|
-
}
|
|
42
|
-
|
|
43
14
|
function loadImage(src) {
|
|
44
15
|
return new Promise((resolve, reject) => {
|
|
45
|
-
const img = createHiddenImg(src);
|
|
16
|
+
// const img = createHiddenImg(src);
|
|
17
|
+
const img = new Image()
|
|
46
18
|
|
|
47
19
|
const onLoad = function () {
|
|
20
|
+
// console.log('loaded')
|
|
21
|
+
|
|
48
22
|
img.removeEventListener("load", onLoad);
|
|
49
23
|
img.removeEventListener("error", onError);
|
|
50
24
|
resolve(img);
|
|
@@ -60,13 +34,13 @@
|
|
|
60
34
|
reject("Load image error " + src);
|
|
61
35
|
};
|
|
62
36
|
|
|
63
|
-
|
|
64
|
-
img.addEventListener("error", onError);
|
|
37
|
+
|
|
65
38
|
|
|
66
39
|
img.src = src;
|
|
67
40
|
|
|
68
41
|
// If the image is already cached (browser cache), complete may be true
|
|
69
42
|
if (img.complete) {
|
|
43
|
+
// console.log('cached')
|
|
70
44
|
// But onload may or may not have been triggered, handle it manually
|
|
71
45
|
if (img.naturalWidth > 0) {
|
|
72
46
|
// Manually trigger the load event
|
|
@@ -78,6 +52,9 @@
|
|
|
78
52
|
img.dispatchEvent(errorEvent);
|
|
79
53
|
}
|
|
80
54
|
resolve(img);
|
|
55
|
+
}else{
|
|
56
|
+
img.addEventListener("load", onLoad);
|
|
57
|
+
img.addEventListener("error", onError);
|
|
81
58
|
}
|
|
82
59
|
});
|
|
83
60
|
}
|