@nmmty/lazycanvas
Version:
A simple way to interact with @napi-rs/canvas in an advanced way!
112 lines (111 loc) • 4.58 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ImageLayer = void 0;
const BaseLayer_1 = require("./BaseLayer");
const enum_1 = require("../../types/enum");
const canvas_1 = require("@napi-rs/canvas");
const utils_1 = require("../../utils/utils");
const LazyUtil_1 = require("../../utils/LazyUtil");
const jimp = __importStar(require("jimp"));
class ImageLayer extends BaseLayer_1.BaseLayer {
props;
constructor(props) {
super(enum_1.LayerType.Image, props || {});
this.props = props ? props : {};
this.props.centring = enum_1.Centring.Center;
}
/**
* @description Sets the source of the image, it can be like link to website or path to file.
* @param src {string} - The `src` of the image.
*/
setSrc(src) {
if (!(0, utils_1.isImageUrlValid)(src))
throw new LazyUtil_1.LazyError('The src of the image must be a valid URL');
this.props.src = src;
return this;
}
/**
* @description Set the size of the image. You can use `numbers`, `percentages`, `px`, `vw`, `vh`, `vmin`, `vmax`.
* @param width {ScaleType} - The `width` of the image.
* @param height {ScaleType} - The `height` of the image.
* @param radius {ScaleType} - The `radius` of the image. (optional)
*/
setSize(width, height, radius) {
this.props.size = {
width: width,
height: height,
radius: radius || 0,
};
return this;
}
async draw(ctx, canvas, manager, debug) {
const parcer = (0, utils_1.parser)(ctx, canvas, manager);
const { xs, ys, w } = parcer.parseBatch({
xs: { v: this.props.x },
ys: { v: this.props.y, options: LazyUtil_1.defaultArg.vl(true) },
w: { v: this.props.size.width }
});
const h = parcer.parse(this.props.size.height, LazyUtil_1.defaultArg.wh(w), LazyUtil_1.defaultArg.vl(true));
const r = parcer.parse(this.props.size.radius, LazyUtil_1.defaultArg.wh(w / 2, h / 2), LazyUtil_1.defaultArg.vl(false, true));
let { x, y } = (0, utils_1.centring)(this.props.centring, this.type, w, h, xs, ys);
if (debug)
LazyUtil_1.LazyLog.log('none', `ImageLayer:`, { x, y, w, h, r });
ctx.save();
(0, utils_1.transform)(ctx, this.props.transform, { width: w, height: h, x, y, type: this.type });
(0, utils_1.drawShadow)(ctx, this.props.shadow);
(0, utils_1.opacity)(ctx, this.props.opacity);
(0, utils_1.filters)(ctx, this.props.filter);
let jmp = await jimp.read(this.props.src);
jmp.resize(w, h);
let image = await (0, canvas_1.loadImage)(await jmp.getBufferAsync('image/png'));
if (!image)
throw new LazyUtil_1.LazyError('The image could not be loaded');
if (r) {
ctx.beginPath();
ctx.moveTo(x + (w / 2), y);
ctx.arcTo(x + w, y, x + w, y + (h / 2), r);
ctx.arcTo(x + w, y + h, x + (w / 2), y + h, r);
ctx.arcTo(x, y + h, x, y + (h / 2), r);
ctx.arcTo(x, y, x + (w / 2), y, r);
ctx.closePath();
ctx.clip();
ctx.drawImage(image, x, y, w, h);
}
else {
ctx.drawImage(image, x, y, w, h);
}
ctx.restore();
}
/**
* @returns {IImageLayer}
*/
toJSON() {
let data = super.toJSON();
data.props = this.props;
return { ...data };
}
}
exports.ImageLayer = ImageLayer;