Image Interface like Python PIL base on HTMLCanvasElement

Install

npm i @bowber/canvas-image

Usage

Most method of CanvasImage class have the same syntax as Image module from Python PIL

View more in Image module from Python PIL here

Examples:

1. Create a blank Image

import CanvasImage from '@bowber/canvas-image'
// Create a blank Image with size 2x2 and fill with white color
const image = CanvasImage.new(2, 2, "white");

2. Open Image from URL

import CanvasImage from '@bowber/canvas-image'
const image = await CanvasImage.open("https://example.com/image.jpg");

3. Open Local Image

import CanvasImage from '@bowber/canvas-image'
const image = await CanvasImage.openFromLocal(fileObject: File);

4. Draw Pixel

import CanvasImage from '@bowber/canvas-image'
const image = CanvasImage.new(10, 10);
image.putPixel(0, 0, `white`);
expect(image.colorData(0, 0, 1, 1)).toEqual([255, 255, 255, 255]);

5. Draw Rectangle

import CanvasImage from '@bowber/canvas-image'
const image = CanvasImage.new(10, 10);
image.fillRect(3, 2, 2, 2, "white");
expect(image.colorData(3, 2, 2, 2)).toEqual([
    ...[255, 255, 255, 255],
    ...[255, 255, 255, 255],
    ...[255, 255, 255, 255],
    ...[255, 255, 255, 255]
])