npm - canvas-img - Versions diffs - 0.0.2 → 0.1.0 - Mend

canvas-img 0.0.2 → 0.1.0

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 (9) hide show

package/README.md +0 -4
package/package.json +10 -5
package/src/drawImageCORS.ts +154 -0
package/src/index.ts +43 -0
package/src/types.ts +30 -0
package/tsconfig.json +31 -0
package/READMME.md +0 -97
package/canvas-img.js +0 -174
/package/{demo.html → demo/demo.html} +0 -0

package/README.md CHANGED Viewed

@@ -1,10 +1,6 @@
 # canvas-img
 Canvas draw image cross origin resource
-## TODO
-1. clear img
-2. use Image
 ## Demo
 ```html
 <!DOCTYPE html>

package/package.json CHANGED Viewed

@@ -1,16 +1,21 @@
 {
   "name": "canvas-img",
-  "version": "0.0.2",
-  "main": "canvas-img.js",
+  "version": "0.1.0",
+  "description": "Cross-origin image drawing library for Canvas",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "unpkg": "dist/index.js",
+  "jsdelivr": "dist/index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [
     "canvas",
     "drawImageCORS",
-    "canvas-img"
+    "canvas-img",
+    "cross-origin"
   ],
   "author": "molang",
-  "license": "MIT",
-  "description": ""
+  "license": "MIT"
 }

package/src/drawImageCORS.ts ADDED Viewed

@@ -0,0 +1,154 @@
+// src/drawImageCORS.ts
+// import { DrawParams } from './types';
+/**
+ * Load image using hidden img element
+ */
+function loadImage(src: string): Promise<HTMLImageElement> {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.crossOrigin = 'anonymous';
+    const onLoad = () => {
+      img.removeEventListener('load', onLoad);
+      img.removeEventListener('error', onError);
+      resolve(img);
+    };
+    const onError = () => {
+      img.removeEventListener('load', onLoad);
+      img.removeEventListener('error', onError);
+      if (img.parentNode) {
+        img.parentNode.removeChild(img);
+      }
+      reject(new Error(`Failed to load image: ${src}`));
+    };
+    img.addEventListener('load', onLoad);
+    img.addEventListener('error', onError);
+    img.src = src;
+    // Handle cached images
+    if (img.complete) {
+      if (img.naturalWidth > 0) {
+        img.dispatchEvent(new Event('load'));
+      } else {
+        img.dispatchEvent(new Event('error'));
+      }
+    }
+  });
+}
+export type DrawParams =
+  | { type: 'simple'; src: string; x: number; y: number }
+  | { type: 'scaled'; src: string; x: number; y: number; width: number; height: number }
+  | { type: 'cropped'; src: string; sx: number; sy: number; sWidth: number; sHeight: number; dx: number; dy: number; dWidth: number; dHeight: number };
+/**
+ * Parse function arguments
+ */
+function parseArguments(args: any[]): DrawParams {
+  if (args.length === 3) {
+    return {
+      type: 'simple',
+      src: args[0],
+      x: args[1],
+      y: args[2],
+    };
+  } else if (args.length === 5) {
+    return {
+      type: 'scaled',
+      src: args[0],
+      x: args[1],
+      y: args[2],
+      width: args[3],
+      height: args[4],
+    };
+  } else if (args.length === 9) {
+    return {
+      type: 'cropped',
+      src: args[0],
+      sx: args[1],
+      sy: args[2],
+      sWidth: args[3],
+      sHeight: args[4],
+      dx: args[5],
+      dy: args[6],
+      dWidth: args[7],
+      dHeight: args[8],
+    };
+  } else {
+    throw new Error(
+      `Invalid number of arguments: expected 3, 5, or 9 arguments, but got ${args.length}`
+    );
+  }
+}
+/**
+ * Check if context is valid
+ */
+function isCanvasValid(ctx: any): ctx is CanvasRenderingContext2D {
+  return ctx instanceof CanvasRenderingContext2D;
+}
+/**
+ * Core drawImageCORS function
+ */
+function drawImageCORS(this: CanvasRenderingContext2D, ...args: any[]): Promise<HTMLImageElement> {
+  const ctx = this;
+  if (!isCanvasValid(ctx)) {
+    return Promise.reject(new Error('Invalid canvas context'));
+  }
+  let params
+  try {
+    params = parseArguments(args);
+  } catch (e) {
+    return Promise.reject(e);
+  }
+  const { src } = params;
+  if (!src || typeof src !== 'string') {
+    return Promise.reject(new Error('Invalid image address'));
+  }
+  return loadImage(src)
+    .then((img) => {
+      if (!isCanvasValid(ctx)) {
+        throw new Error('Canvas context is no longer valid');
+      }
+      switch (params.type) {
+        case 'simple':
+          ctx.drawImage(img, params.x, params.y);
+          break;
+        case 'scaled':
+          ctx.drawImage(img, params.x, params.y, params.width, params.height);
+          break;
+        case 'cropped':
+          ctx.drawImage(
+            img,
+            params.sx,
+            params.sy,
+            params.sWidth,
+            params.sHeight,
+            params.dx,
+            params.dy,
+            params.dWidth,
+            params.dHeight
+          );
+          break;
+      }
+      return img;
+    })
+    .catch((error) => {
+      console.error('drawImageCORS failed:', error.message);
+      throw error;
+    });
+}
+export default drawImageCORS;

package/src/index.ts ADDED Viewed

@@ -0,0 +1,43 @@
+// src/index.ts
+import drawImageCORS from './drawImageCORS';
+// Extend CanvasRenderingContext2D prototype
+if (typeof CanvasRenderingContext2D !== 'undefined') {
+  CanvasRenderingContext2D.prototype.drawImageCORS = drawImageCORS;
+} else if (typeof HTMLCanvasElement !== 'undefined') {
+  (HTMLCanvasElement.prototype as any).drawImageCORS = drawImageCORS;
+}
+// Export types
+// export * from './types';
+// Declare global augmentation for TypeScript
+declare global {
+  interface CanvasRenderingContext2D {
+    drawImageCORS(
+      src: string,
+      x: number,
+      y: number
+    ): Promise<HTMLImageElement>;
+    drawImageCORS(
+      src: string,
+      x: number,
+      y: number,
+      width: number,
+      height: number
+    ): Promise<HTMLImageElement>;
+    drawImageCORS(
+      src: string,
+      sx: number,
+      sy: number,
+      sWidth: number,
+      sHeight: number,
+      dx: number,
+      dy: number,
+      dWidth: number,
+      dHeight: number
+    ): Promise<HTMLImageElement>;
+  }
+}

package/src/types.ts ADDED Viewed

@@ -0,0 +1,30 @@
+// /**
+//  * Extended CanvasRenderingContext2D with drawImageCORS method
+//  */
+// export interface CanvasRenderingContext2DWithCORS extends CanvasRenderingContext2D {
+//   drawImageCORS(
+//     src: string,
+//     x: number,
+//     y: number
+//   ): Promise<HTMLImageElement>;
+//   drawImageCORS(
+//     src: string,
+//     x: number,
+//     y: number,
+//     width: number,
+//     height: number
+//   ): Promise<HTMLImageElement>;
+//   drawImageCORS(
+//     src: string,
+//     sx: number,
+//     sy: number,
+//     sWidth: number,
+//     sHeight: number,
+//     dx: number,
+//     dy: number,
+//     dWidth: number,
+//     dHeight: number
+//   ): Promise<HTMLImageElement>;
+// }

package/tsconfig.json ADDED Viewed

@@ -0,0 +1,31 @@
+{
+  "compilerOptions": {
+    // Output
+    "target": "ES2015",
+    "module": "ESNext",
+    "lib": ["ES2015", "DOM"],
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    // Type Checking
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    // Interop
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "resolveJsonModule": true,
+    // Advanced
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "removeComments": false,
+    "preserveConstEnums": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist", "demo"]
+}

package/READMME.md DELETED Viewed

@@ -1,97 +0,0 @@
-# canvas-img
-Canvas draw image cross origin resource
-## Demo
-```html
-<!DOCTYPE html>
-<html>
-<head>
-    <meta charset="UTF-8">
-    <title>drawImageCORS demo</title>
-</head>
-<body>
-    <canvas id="myCanvas" width="800" height="600"></canvas>
-    <script src="canvas-img.js"></script>
-    <script>
-        const canvas = document.getElementById('myCanvas');
-        const ctx = canvas.getContext('2d');
-        // drawImageCORS (src, x, y)
-        ctx.drawImageCORS('https://picsum.photos/400/300', 50, 50)
-            .then(() => console.log('done'))
-            .catch(err => console.error('error:', err));
-        // drawImageCORS (src, x, y, width, height)
-        ctx.drawImageCORS('https://picsum.photos/400/200', 500, 50, 200, 150)
-            .then(() => console.log('done'));
-        // drawImageCORS (src, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
-        ctx.drawImageCORS(
-            'https://picsum.photos/400/400',
-            50, 50, 200, 150,  // clip
-            50, 300, 200, 150
-        );
-        async function loadMultiple() {
-            try {
-                await ctx.drawImageCORS('https://picsum.photos/200/200', 0, 0);
-                await ctx.drawImageCORS('https://picsum.photos/200/200', 200, 0);
-                await ctx.drawImageCORS('https://picsum.photos/200/200', 400, 0);
-                console.log('all done');
-            } catch (error) {
-                console.error('load error:', error);
-            }
-        }
-        loadMultiple();
-    </script>
-</body>
-</html><!DOCTYPE html>
-<html>
-<head>
-    <meta charset="UTF-8">
-    <title>drawImageCORS demo</title>
-</head>
-<body>
-    <canvas id="myCanvas" width="800" height="600"></canvas>
-    <script src="canvas-img.js"></script>
-    <script>
-        const canvas = document.getElementById('myCanvas');
-        const ctx = canvas.getContext('2d');
-        // drawImageCORS (src, x, y)
-        ctx.drawImageCORS('https://picsum.photos/400/300', 50, 50)
-            .then(() => console.log('done'))
-            .catch(err => console.error('error:', err));
-        // drawImageCORS (src, x, y, width, height)
-        ctx.drawImageCORS('https://picsum.photos/400/200', 500, 50, 200, 150)
-            .then(() => console.log('done'));
-        // drawImageCORS (src, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
-        ctx.drawImageCORS(
-            'https://picsum.photos/400/400',
-            50, 50, 200, 150,  // clip
-            50, 300, 200, 150
-        );
-        async function loadMultiple() {
-            try {
-                await ctx.drawImageCORS('https://picsum.photos/200/200', 0, 0);
-                await ctx.drawImageCORS('https://picsum.photos/200/200', 200, 0);
-                await ctx.drawImageCORS('https://picsum.photos/200/200', 400, 0);
-                console.log('all done');
-            } catch (error) {
-                console.error('load error:', error);
-            }
-        }
-        loadMultiple();
-    </script>
-</body>
-</html>
-```

package/canvas-img.js DELETED Viewed

@@ -1,174 +0,0 @@
-/**
- * canvas.drawImageCORS - Cross-origin image drawing library
- * Loads images by dynamically creating hidden <img> elements, then draws them to canvas after loading completes
- *
- * Usage:
- *   canvas.drawImageCORS(src, x, y)
- *   canvas.drawImageCORS(src, x, y, width, height)
- *   canvas.drawImageCORS(src, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
- *
- * Returns: Promise that resolves when the image is loaded and drawn
- */
-(function () {
-  function loadImage(src) {
-    return new Promise((resolve, reject) => {
-      // const img = createHiddenImg(src);
-      const img = new Image()
-      const onLoad = function () {
-        // console.log('loaded')
-        img.removeEventListener("load", onLoad);
-        img.removeEventListener("error", onError);
-        resolve(img);
-      };
-      const onError = function () {
-        img.removeEventListener("load", onLoad);
-        img.removeEventListener("error", onError);
-        if (img.parentNode) {
-          img.parentNode.removeChild(img);
-        }
-        reject("Load image error " + src);
-      };
-      img.src = src;
-      // If the image is already cached (browser cache), complete may be true
-      if (img.complete) {
-        // console.log('cached')
-        // But onload may or may not have been triggered, handle it manually
-        if (img.naturalWidth > 0) {
-          // Manually trigger the load event
-          const loadEvent = new Event("load");
-          img.dispatchEvent(loadEvent);
-        } else {
-          // Manually trigger the error event
-          const errorEvent = new Event("error");
-          img.dispatchEvent(errorEvent);
-        }
-        resolve(img);
-      }else{
-        img.addEventListener("load", onLoad);
-        img.addEventListener("error", onError);
-      }
-    });
-  }
-  function parseArguments(args) {
-    if (args.length === 3) {
-      // drawImageCORS(src, x, y)
-      return {
-        type: "simple",
-        src: args[0],
-        x: args[1],
-        y: args[2],
-      };
-    } else if (args.length === 5) {
-      // drawImageCORS(src, x, y, width, height)
-      return {
-        type: "scaled",
-        src: args[0],
-        x: args[1],
-        y: args[2],
-        width: args[3],
-        height: args[4],
-      };
-    } else if (args.length === 9) {
-      // drawImageCORS(src, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
-      return {
-        type: "cropped",
-        src: args[0],
-        sx: args[1],
-        sy: args[2],
-        sWidth: args[3],
-        sHeight: args[4],
-        dx: args[5],
-        dy: args[6],
-        dWidth: args[7],
-        dHeight: args[8],
-      };
-    } else {
-      throw new Error("Invalid number of arguments: expected 3, 5, or 9 arguments, but got ${args.length}");
-    }
-  }
-  function isCanvasValid(ctx) {
-    return ctx instanceof CanvasRenderingContext2D;
-  }
-  function drawImageCORS(...args) {
-    const ctx = this;
-    if (!isCanvasValid(ctx)) {
-      return Promise.reject(new Error("Invalid canvas"));
-    }
-    let params;
-    try {
-      params = parseArguments(args);
-    } catch (e) {
-      return Promise.reject(e);
-    }
-    const src = params.src;
-    if (!src || typeof src !== "string") {
-      return Promise.reject(new Error("Invalid image address"));
-    }
-    return loadImage(src)
-      .then((img) => {
-        if (!isCanvasValid(ctx)) {
-          throw new Error("Invalid canvas");
-        }
-        switch (params.type) {
-          case "simple":
-            ctx.drawImage(img, params.x, params.y);
-            break;
-          case "scaled":
-            ctx.drawImage(img, params.x, params.y, params.width, params.height);
-            break;
-          case "cropped":
-            ctx.drawImage(
-              img,
-              params.sx,
-              params.sy,
-              params.sWidth,
-              params.sHeight,
-              params.dx,
-              params.dy,
-              params.dWidth,
-              params.dHeight,
-            );
-            break;
-        }
-        return img;
-      })
-      .catch((error) => {
-        console.error("drawImageCORS faild:", error.message);
-        throw error;
-      });
-  }
-  if (typeof CanvasRenderingContext2D !== "undefined") {
-    CanvasRenderingContext2D.prototype.drawImageCORS = drawImageCORS;
-  } else {
-    if (typeof HTMLCanvasElement !== "undefined") {
-      HTMLCanvasElement.prototype.drawImageCORS = drawImageCORS;
-    }
-  }
-  if (typeof module !== "undefined" && module.exports) {
-    module.exports = {
-      drawImageCORS,
-    };
-  } else if (typeof window !== "undefined") {
-    window.drawImageCORS = drawImageCORS;
-  }
-})();

/package/{demo.html → demo/demo.html} RENAMED Viewed

File without changes