Implement Node support

README.md

@@ -15,22 +15,41 @@ Check out this codepen demo: https://codepen.io/markus-wa/pen/eYEMvxd - thanks t
 
 ## Sample code
 
+Stickerify can run in a web browser, or in a Node.js environment. For Node.js, you should use the (`canvas`)[https://www.npmjs.com/package/canvas] module for image loading, as this is what Stickerify uses internally for image processing.
+
+### HTML
+
 ```html
 <img id="out"/>
 ```
 
 ```js
 const img = new Image(),
-  out = document.getElementByID("out");
+  out = document.getElementById("out");
 
-img.crossOrigin = 'anonymous';
+img.crossOrigin = "anonymous";
 img.onload = () => {
-  out.src = stickerify(img, 3, 'white').toDataURL();
+  out.src = stickerify(img, 3, "white").toDataURL();
 };
-img.src = 'https://example.com/url-to-transparanet-img.png';
+img.src = "https://raw.githubusercontent.com/markus-wa/stickerify/main/example/input.png";
+```
+
+When run in the browser, `stickerify()` returns a [HTML5 canvas element](https://www.w3schools.com/html/html5_canvas.asp).
+
+### Node.js
+
+```js
+const { stickerify } = require("stickerify");
+const { loadImage } = require( "canvas" );
+const { writeFile } = require( "fs" );
+
+loadImage("https://raw.githubusercontent.com/markus-wa/stickerify/main/example/input.png")
+  .then(image => stickerify(image, 3, "white"))
+  .then(image => stickerify(image, 1, "grey"))
+  .then(canvas => writeFile("output.png", canvas.toBuffer(), err => console.log(err || "done")));
 ```
 
-`stickerify()` returns a [HTML5 canvas element](https://www.w3schools.com/html/html5_canvas.asp)
+When run in Node.js, `stickerify()` returns a [Canvas](https://www.npmjs.com/package/canvas) object.
 
 ## Install
 

package.json

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@types/node": "^16.11.4",
+	"canvas" : "^2.8.0",
     "typescript": "^4.4.4"
   },
   "devDependencies": {

src/index.ts

@@ -1,19 +1,19 @@
+import { createCanvas, Canvas, Image } from "canvas";
+
 import trim from "./trim";
 
 function stickerify(
-  img: HTMLImageElement,
+  img: Image | HTMLImageElement,
   thickness: number = 1,
   fillStyle: string | CanvasGradient | CanvasPattern = "white",
   samples: number = 36
-) {
-  const canvas = document.createElement("canvas"),
-    ctx = canvas.getContext("2d")!;
+): Canvas | HTMLCanvasElement {
 
   const x = thickness + 1, // 1px buffer in case of rounding errors etc.
     y = thickness + 1;
 
-  canvas.width = img.width + 2 * x;
-  canvas.height = img.height + 2 * y;
+  const canvas = createCanvas(img.width + x * 2, img.height + y * 2),
+    ctx = canvas.getContext("2d")!;
 
   for (let angle = 0; angle < 360; angle += 360 / samples) {
     ctx.drawImage(
@@ -34,15 +34,3 @@ function stickerify(
 }
 
 export { stickerify };
-
-/*
-    // example:
-
-    const img = new Image();
-
-    img.crossOrigin = 'anonymous';
-    img.onload = () => {
-      out.src = stickerify(img, 3).toDataURL();
-    };
-    img.src = 'https://i.imgur.com/CgGLydT.png';
-  */

src/trim.ts

@@ -1,3 +1,5 @@
+import { Canvas, createCanvas, NodeCanvasRenderingContext2D } from "canvas";
+
 // trim(canvas) taken from https://gist.github.com/remy/784508
 interface Bound {
   top: number | null;
@@ -6,9 +8,9 @@ interface Bound {
   bottom: number | null;
 }
 
-function trim(c: HTMLCanvasElement) {
-  const ctx = c.getContext("2d")!,
-    copy = document.createElement("canvas").getContext("2d")!,
+function trim(c: Canvas | HTMLCanvasElement): Canvas | HTMLCanvasElement {
+  const ctx = c.getContext("2d")! as NodeCanvasRenderingContext2D | CanvasRenderingContext2D,
+    copy = createCanvas(c.width, c.height).getContext("2d")!,
     pixels = ctx.getImageData(0, 0, c.width, c.height);
 
   let x: number,