Img provides convenient functions to support image operations on HTML Canvas and CanvasSpace. Combine this with other Pts functions to experiment with visual forms that integrate bitmaps and vector graphics.
Create an Img
Specify if you want to manipulate pixels of this image. Default is false.
Set the CanvasSpace reference. This is optional but will make sure the image's pixelScale match the canvas and set the context for creating pattern.
an optional parameter to enable loading cross-domain images if set to true. The image server's configuration must also be set correctly. For more, see this documentation.
Get the internal canvas' context. You can use this to draw directly on canvas, or create a new CanvasForm instance with it.
Get current image source. If editable, this will return the canvas, otherwise it will return the original image.
Get a Mat instance with a scale transform based on current pixelScale.
This can be useful for generating a domMatrix for transforming patterns consistently across different pixel-density screens.
Get an efficient, readonly bitmap of the current canvas.
Optional size to crop
a Promise that resolves to an ImageBitmap
Create an editable blank image
of image
Set the CanvasSpace reference. This is optional but will make sure the image's pixelScale match the canvas and set the context for creating pattern.
Optionally set a specific pixel scale (density) of the image canvas.
Crop an area of the image.
bounding box
Apply filters such as blur and grayscale to the canvas image. The original image is unchanged until sync().
a css filter string such as "blur(10px) | contrast(200%)". See MDN documentation for a list of filter functions.
Create a blob url that can be passed to Img.load
an image blob such as new Blob([my_Uint8Array], {type: 'image/png'})
Specify if you want to manipulate pixels of this image. Default is false.
Get a CanvasForm for drawing on the internal canvas if this Img is editable
Given an ImaegData object and a position, return the RGBA pixel value at that position.
an ImageData object
a position on the image
values of the pixel at the specific position
Convert ImageData object to a Blob, which you can then create an Img instance via Img.fromBlob. Note that the resulting image's dimensions will not account for pixel density.
Initiate an editable canvas
width of canvas
height of canvas
pixel scale
Load an image.
an url of the image in same domain. Alternatively you can use a base64 string. To load from Blob, use Img.fromBlob.
a Promise that resolves to an Img
A static function to load an image with an optional ready callback. The Img instance will returned immediately before the image is loaded. To use async/await, use the loadAsync function or new Img(...).load(...).
an url of the image in same domain. Alternatively you can use a base64 string. To load from Blob, use Img.fromBlob.
Specify if you want to manipulate pixels of this image. Default is false.
Set the CanvasSpace reference. This is optional but will make sure the image's pixelScale match the canvas and set the context for creating pattern.
An optional ready callback function
A static method to load an image using async/await.
an url of the image in same domain. Alternatively you can use a base64 string. To load from Blob, use Img.fromBlob.
Specify if you want to manipulate pixels of this image. Default is false.
Set the CanvasSpace reference. This is optional but will make sure the image's pixelScale match the canvas and set the context for creating pattern.
A static method to load an image pattern using async/await.
an url of the image in same domain. Alternatively you can use a base64 string. To load from Blob, use Img.fromBlob.
Set the CanvasSpace reference. This is optional but will make sure the image's pixelScale match the canvas and set the context for creating pattern.
set how the pattern will repeat fills
Specify if you want to manipulate pixels of this image. Default is false.
a CanvasPattern instance for use in fill()
Create a canvas pattern for fill()
set how the pattern should repeat-fill
If true, use this Img's internal canvas content as pattern fill. This enables the pattern to update dynamically.
a CanvasPattern instance for use in fill()
Get the RGBA values of a pixel in the image
position of the pixel
Specify if the pixel position should be scaled. Usually use rescale when tracking image and don't rescale when tracking canvas. You may also set a custom scale value.
values of the pixel at the specific position
Resize the canvas image. The original image is unchanged until sync().
A PtLike array specifying either [x, y] scales or [x, y] sizes.
If true, treat the first parameter as scales. Otherwise, treat it as specific sizes.
Replace the image with the current canvas data. For example, you can use CanvasForm's static functions to draw on this.ctx and then update the current image.
To display the internal canvas, you can also use form.image( img.canvas ) directly.