Image

Image rendering.

Installation

npm install @pencil.js/image

Examples

import Image from "@pencil.js/image";

const position = [100, 200];
const url = "url/to/my/file.png";
const options = {
    fill: "black",
    description: "Cutest cat ever !"
};
const image = new Image(position, url, options);
image.on("ready", () => {
    console.log("Image is loaded");
});

// Can be use to preload a bunch of images
Image.load([url1, url2, url3]).then(() => {
    console.log("Images ready");
});

Be aware that this example overrides Javascript's Image global. Use namespace to avoid this issue.

import * as Namespace from "@pencil.js/image";
new Namespace.Image();

ImageOptions

Inherit from RectangleOptions.

| Name | Type | Default | Comment | | ---- | ---- | ------- | ------- | |fill |Color or String |null |Background color for transparent images | |description |String |"" |Accessibility description of the image |