Fix height/width being undefined when creating a Jimp from a canvas

Author: hipstersmoothie

packages/core/src/index.ts

@@ -281,10 +281,18 @@ export function createJimp<
         throw new Error("data must be a Buffer");
       }
 
-      return new CustomJimp({ ...bitmap, data }) as InstanceType<
-        typeof CustomJimp
-      > &
-        ExtraMethodMap;
+      if (
+        typeof bitmap.height !== "number" ||
+        typeof bitmap.width !== "number"
+      ) {
+        throw new Error("bitmap must have width and height");
+      }
+
+      return new CustomJimp({
+        height: bitmap.height,
+        width: bitmap.width,
+        data,
+      }) as InstanceType<typeof CustomJimp> & ExtraMethodMap;
     }
 
     /**

packages/docs/src/content/docs/guides/browser.mdx

@@ -25,7 +25,7 @@ To use it simply import `jimp` instead.
 
 ## Usage
 
-There are two main ways to use Jimp in the browser.
+There are a few main ways to use Jimp in the browser.
 
 ### With hosted file
 
@@ -64,6 +64,32 @@ function handleFile(e: React.ChangeEvent<HTMLInputElement>) {
 input.addEventListener("change", handleFile);
 ```
 
+### Using Canvas
+
+You can also use Jimp with a canvas.
+
+```ts
+const canvas = document.getElementById("my-canvas");
+const ctx = canvas.getContext("2d");
+
+// Load the canvas into a Jimp instance
+const image = await Jimp.fromBitmap(
+  ctx.getImageData(0, 0, canvas.width, canvas.height)
+);
+
+// Manipulate the image
+image.greyscale();
+
+const imageData = new ImageData(
+  new Uint8ClampedArray(image.bitmap.data),
+  image.bitmap.width,
+  image.bitmap.height
+);
+
+// Write back to the canvas
+ctx.putImageData(imageData, 0, 0);
+```
+
 ## Using Fonts
 
 Jimp supports loading fonts from a URL or a file path.

packages/docs/src/content/docs/guides/migrate-to-v1.mdx

@@ -88,15 +88,20 @@ async function main() {
 
 ### `Jimp.fromBitmap`
 
-You can load an image from a bitmap.
+You can load an image (or canvas data) from a bitmap.
 In v0 this was done through the constructor.
 In v1 it is done through the `Jimp.fromBitmap` method.
 
 ```js
 import { Jimp } from "jimp";
 
 async function main() {
-  const image = await Jimp.fromBitmap(bitmap);
+  const canvas = document.getElementById("my-canvas");
+  const ctx = canvas.getContext("2d");
+
+  const image = await Jimp.fromBitmap(
+    ctx.getImageData(0, 0, canvas.width, canvas.height)
+  );
 }
 ```
 

packages/jimp/package.json

@@ -18,7 +18,7 @@
   },
   "scripts": {
     "lint": "eslint .",
-    "test": "vitest",
+    "test": "vitest --exclude '**/*.browser.test.ts'",
     "test:browser": "vitest --config vitest.config.browser.mjs",
     "build": "tshy",
     "build:browser": "rollup -c",

packages/jimp/src/canvas.browser.test.ts

@@ -0,0 +1,43 @@
+import { expect, test, describe } from "vitest";
+import { Jimp } from "./index.js";
+
+describe("Canvas", () => {
+  test("should be able to create a Jimp from a canvas", async () => {
+    const canvas = document.createElement("canvas");
+    const ctx = canvas.getContext("2d")!;
+
+    // make all the pixels red
+    ctx.fillStyle = "red";
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+    const beforeValue = ctx.getImageData(0, 0, canvas.width, canvas.height)
+      .data[0];
+
+    const image = await Jimp.fromBitmap(
+      ctx.getImageData(0, 0, canvas.width, canvas.height)
+    );
+
+    // The jimp image is red
+    expect(image.bitmap.data[0]).toBe(255);
+    expect(image.bitmap.data[1]).toBe(0);
+    expect(image.bitmap.data[2]).toBe(0);
+    expect(image.bitmap.data[3]).toBe(255);
+
+    // Modify the image
+    image.greyscale();
+
+    const imageData = new ImageData(
+      new Uint8ClampedArray(image.bitmap.data),
+      image.bitmap.width,
+      image.bitmap.height
+    );
+
+    // Write back to the canvas
+    ctx.putImageData(imageData, 0, 0);
+
+    // The canvas should have changed
+    expect(beforeValue).not.toBe(
+      ctx.getImageData(0, 0, canvas.width, canvas.height).data[0]
+    );
+  });
+});