Simple image editing library.
- npm
npm install mode-image
- yarn
yarn add mode-image
We can specify image source to editing using modeImage(image source)
.
-
Image URL
modeImage("/public/foo.png") .rotate(angle) .crop(area) // ... .toDataURL() .then((result) => { result; // data:image/png;base64,R0lGOD.... });
-
Data URL
The URLs string prefixed with the
data:image/...
scheme. see MDN Data URLmodeImage("data:image/png;base64,R0lGOD....") .rotate(angle) .crop(area) // ... .toDataURL() .then((result) => { result; // data:image/png;base64,R0lGOD.... });
-
HTMLImageElement
The instance of HTMLImageElement.
const image = new Image(); image.src = "https://..."; modeImage(image) .rotate(angle) .crop(area) // ... .toDataURL() .then((result) => { result; // data:image/png;base64,R0lGOD.... });
-
in NodeJS
In NodeJS, we should use custom image, canvas creator. see node-canvas.
import { createCanvas, Image, loadImage } from "canvas"; const options = { createCanvas: createCanvas, createImage: () => new Image(), }; const image = await loadImage("./path/foo.png"); modeImage(image, options) .rotate() .toDataURL() .then((result) => { result; // data:image/png;base64,R0lGOD.... });
- radian (number): The rotation angle, clockwise in radians.
/origin.png (100 x 100) | result (100 x 100) |
---|---|
import modeImage from "mode-image";
const result = await modeImage("/origin.png")
.rotate((Math.PI / 180) * 90)
.toDataUrl();
// data:image/png;base64,...
- size (object):
- width (number): The height to change.
- height (number): The width to change.
/origin.png (150 x 150) | result (50 x 50) |
---|---|
import modeImage from "mode-image";
const result = await modeImage("/origin.png")
.resize({
width: 50,
height: 50,
})
.toDataUrl();
// data:image/png;base64,...
- area (object):
- x (number): The pixels from left side.
- y (number): The Pixels from right side.
- width (number): The width pixels of the crop.
- height (number): The height pixels of the crop.
/origin.png (150 x 150) | result (50 x 50) |
---|---|
import modeImage from "mode-image";
const result = await modeImage("/origin.png")
.crop({
x: 50,
y: 50,
width: 50,
height: 50,
})
.toDataUrl();
// data:image/png;base64,...
- num (number): The number of times to repeat.
/origin.png (150 x 150) | result (450 x 150) |
---|---|
import modeImage from "mode-image";
const result = await modeImage("/origin.png")
.repeatX(3)
.toDataUrl();
// data:image/png;base64,...
- num (number): The number of times to repeat.
/origin.png (150 x 150) | result (150 x 300) |
---|---|
import modeImage from "mode-image";
const result = await modeImage("/origin.png")
.repeatY(2)
.toDataUrl();
// data:image/png;base64,...
- image (image source): The image source merging with the current image. It support same data type with ``
/left.png (100 x 50) | /right.png (100 x 50) | result (100 x 50) |
---|---|---|
import modeImage from "mode-image";
const result = await modeImage("/left.png")
.merge("/right.png")
.toDataUrl();
// data:image/png;base64,...