canvas-img 0.0.1 → 0.0.3

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.
Files changed (4) hide show
  1. package/README.md +0 -4
  2. package/canvas-img.js +9 -32
  3. package/package.json +1 -1
  4. package/READMME.md +0 -101
package/README.md CHANGED
@@ -1,10 +1,6 @@
1
1
  # canvas-img
2
2
  Canvas draw image cross origin resource
3
3
 
4
- ## TODO
5
- 1. clear img
6
- 2. use Image
7
-
8
4
  ## Demo
9
5
  ```html
10
6
  <!DOCTYPE html>
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
- img.addEventListener("load", onLoad);
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
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "canvas-img",
3
- "version": "0.0.1",
3
+ "version": "0.0.3",
4
4
  "main": "canvas-img.js",
5
5
  "scripts": {
6
6
  "test": "echo \"Error: no test specified\" && exit 1"
package/READMME.md DELETED
@@ -1,101 +0,0 @@
1
- # canvas-img
2
- Canvas draw image cross origin resource
3
-
4
- ## TODO
5
- 1. clear img
6
- 2. use Image
7
-
8
- s## Demo
9
- ```html
10
- <!DOCTYPE html>
11
- <html>
12
- <head>
13
- <meta charset="UTF-8">
14
- <title>drawImageCORS demo</title>
15
- </head>
16
- <body>
17
- <canvas id="myCanvas" width="800" height="600"></canvas>
18
-
19
- <script src="canvas-img.js"></script>
20
-
21
- <script>
22
- const canvas = document.getElementById('myCanvas');
23
- const ctx = canvas.getContext('2d');
24
-
25
- // drawImageCORS (src, x, y)
26
- ctx.drawImageCORS('https://picsum.photos/400/300', 50, 50)
27
- .then(() => console.log('done'))
28
- .catch(err => console.error('error:', err));
29
-
30
- // drawImageCORS (src, x, y, width, height)
31
- ctx.drawImageCORS('https://picsum.photos/400/200', 500, 50, 200, 150)
32
- .then(() => console.log('done'));
33
-
34
- // drawImageCORS (src, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
35
- ctx.drawImageCORS(
36
- 'https://picsum.photos/400/400',
37
- 50, 50, 200, 150, // clip
38
- 50, 300, 200, 150
39
- );
40
-
41
- async function loadMultiple() {
42
- try {
43
- await ctx.drawImageCORS('https://picsum.photos/200/200', 0, 0);
44
- await ctx.drawImageCORS('https://picsum.photos/200/200', 200, 0);
45
- await ctx.drawImageCORS('https://picsum.photos/200/200', 400, 0);
46
- console.log('all done');
47
- } catch (error) {
48
- console.error('load error:', error);
49
- }
50
- }
51
-
52
- loadMultiple();
53
- </script>
54
- </body>
55
- </html><!DOCTYPE html>
56
- <html>
57
- <head>
58
- <meta charset="UTF-8">
59
- <title>drawImageCORS demo</title>
60
- </head>
61
- <body>
62
- <canvas id="myCanvas" width="800" height="600"></canvas>
63
-
64
- <script src="canvas-img.js"></script>
65
-
66
- <script>
67
- const canvas = document.getElementById('myCanvas');
68
- const ctx = canvas.getContext('2d');
69
-
70
- // drawImageCORS (src, x, y)
71
- ctx.drawImageCORS('https://picsum.photos/400/300', 50, 50)
72
- .then(() => console.log('done'))
73
- .catch(err => console.error('error:', err));
74
-
75
- // drawImageCORS (src, x, y, width, height)
76
- ctx.drawImageCORS('https://picsum.photos/400/200', 500, 50, 200, 150)
77
- .then(() => console.log('done'));
78
-
79
- // drawImageCORS (src, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
80
- ctx.drawImageCORS(
81
- 'https://picsum.photos/400/400',
82
- 50, 50, 200, 150, // clip
83
- 50, 300, 200, 150
84
- );
85
-
86
- async function loadMultiple() {
87
- try {
88
- await ctx.drawImageCORS('https://picsum.photos/200/200', 0, 0);
89
- await ctx.drawImageCORS('https://picsum.photos/200/200', 200, 0);
90
- await ctx.drawImageCORS('https://picsum.photos/200/200', 400, 0);
91
- console.log('all done');
92
- } catch (error) {
93
- console.error('load error:', error);
94
- }
95
- }
96
-
97
- loadMultiple();
98
- </script>
99
- </body>
100
- </html>
101
- ```