CODEWITHSUNDEEP
node.jscanvaselectronwebassemblycanvaskit
kochizufan
kochizufan

Reputation: 2431

Load images for canvaskit-wasm on node.js environment

I want to load some images (png, jpeg, etc) for canvaskit-wasm on node.js environment.
canvaskit-wasm: https://www.npmjs.com/package/canvaskit-wasm

I can imagine I should use putImageData method, but what data type should I use for argument of this method?
ArrayBuffer or ...?
I can't find any example for node.js environment usage, so I wanto to know it.

I know we can use node-canvas for node.js environment, but I want to use canvas with electron.
Node-canvas is rely on native binary, so I found some hard-to-solve issues to be packaged by electron. Hence I want to use canvaskit-wasm with my electron app.

Upvotes: 0

Views: 1042

Answers (1)

kochizufan
kochizufan

Reputation: 2431

I finally found the solution:

https://github.com/google/skia/blob/main/modules/canvaskit/npm_build/node.example.js

import path from "node:path";
import fs from "node:fs/promises";
import CanvasKitInit from "canvaskit-wasm";

async function main() {
  const dirname = path.dirname(new URL(import.meta.url).pathname);

  const CanvasKit = await CanvasKitInit({
    locateFile: (file) => path.join(dirname, "node_modules", "canvaskit-wasm", "bin", file)
  });
  const canvas = CanvasKit.MakeCanvas(300, 300);
  const iconBuffer = await fs.readFile("./icon_square.jpg");
  const img = canvas.decodeImage(iconBuffer);

  const ctx = canvas.getContext("2d");

  ctx.drawImage(img, 0, 0, 150, 150);

  const base64 = canvas.toDataURL();
  console.log(base64);

  await fs.writeFile("new_image.png", base64.replace(/^data:image\/png;base64,/, ""), "base64");
}

main();

Thank you for kobakazu0429 's help

Upvotes: 0

Related Questions