AvatarCanvas

AvatarCanvas is a Javascript class to create avatars/profile pictures with ease. Just pass the id of an existing canvas and images can be cropped and zoomed with then exported to required formats

Installation

npm

AvatarCanvas can be found on the npm repositories as avatarcanvas.

$ npm i avatarcanvas

Importing

AvatarCanvas should be imported as an ES module.

import { AvatarCanvas } from "avatarcanvas";

Basic Usage

Having an inital canvas (with width and height set) we can create an avatar.

<canvas id="avatar" width="256" height="256"></canvas>

The first argument of the constructor is the ID of the canvas to use as the avatar editor.

const avatar = new AvatasCanvas("avatar", { image: "./image.jpg" });

The image argument should also be passed unless you wish to display anything that has previously been added to the canvas. An image can be loaded later with the setImage method.

Constructor arguments

| method | description | | -------- | -------------------------------------------------------------------------------------------------------------- | | image | Initial image to display on the canvas. This can either be local or a remote http image | | slider | ID of a slider to use for zooming or slider options object | | loader | ID of a file input element to select new image | | clip | Either a string of one of the defaults circle,diamond or triangle paths or an array of [x,y] to draw clip path |

slider

AvatarCanvas can use a regular HTML range input as a zoom slider. Just pass the ID of the slider to use and it can be used to change the zoom scale of the canvas.

<input id="scale_slider" type="range" max="5" step="0.2" />

const avatar = new AvatarCanvas("avatar", {
  slider: "scale_slider",
});

An options object for the slider can also be passed to override any options set in the HTML.

const avatar = new AvatarCanvas("avatar", {
  scale: {
    id: "scale_slider", // Id of the range slider element
    max: 8, // Maximum x zoom scale
    step: 0.2, // Steps to change zoom scale by
    disabled: false, // Enable or disable the zoom slider element
  },
});

loader

This is the ID of a file input element to change the canvas image.

<input type="file" id="changeImage" />

const avatar = new AvatarCanvas("avatar", {
  loader: "changeImage",
});

Clip paths with clip

Clip paths can be added to the canvas to create different shaped avatars. When exported the clipped area withh be transparent when viewed as a PNG. There are currently three defaults, circle, diamond and triangle

const avatar = new AvatarCanvas("avatar", {
  clip: "circle", // diamond, triangle...
});

You can also provide an array of [x,y] points to create a custom clip path

const avatar = new AvatarCanvas("avatar", {
  image: "./test.jpg",
  clip: [ [0, 0], [128, 128], [256, 0], [256, 256], [0, 256], ],
});

Enable/Disable methods

Zooming and panning can be enabled/disabled by using the following methods

| method | description | type | default | | ------------- | -------------------------------------------------------------------------------------- | --------- | ------- | | allowZoom | Allow zooming on avatar. This will disable both scrollwheel zooming and slider zooming | boolean | true | | allowScroll | Allow scrolling on avatar | boolean | true | | allowSlider | Allow slider on avatar | boolean | true | | allowPan | Allow panning of the avatar | boolean | true |

Exporting canvas image

| method | description | arguments | | ------- | --------------------------------------------------------------------------- | --------- | | toPNG | Returns the images as a PNG string. Clip paths will result in transparency. | quality | | toJPG | Returns the images as a JPG string | quality |

These methods will return the canvas image as a string format representing the image. If toPNG is used the clip path will result in transparency.

const img = document.getElementById("image_to_replace");
img.src = avatar.toPNG(0.9);

A quality between 0.1 and 1 can be passed to change the quality ofthe returned image and alter file size

toBlob object

By calling toBlob with a callback the canvas data will create a Blob object that can be used to send to the server etc..

// Example of sending Blob to server
avatar.toBlob((blob) => {
    const formdata = new FormData()
    formdata.append('image', blob)
    fetch('/upload', { method: "POST", body: formdata }).then(/* ... */)
});