canvas-img 0.0.3 → 0.1.0

package/package.json

@@ -1,16 +1,21 @@
 {
   "name": "canvas-img",
-  "version": "0.0.3",
-  "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

@@ -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

@@ -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

@@ -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

@@ -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/canvas-img.js

@@ -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;
-  }
-})();