mc-image-editor
Version:
An image editor library for magic-cut app (http://www.magic-cut.in/)
62 lines • 8.75 kB
JavaScript
import { ReplaySubject, fromEvent } from 'rxjs';
export class EditableImageService {
constructor(data, editor) {
this.editor = editor;
this.image = new Image();
this.imageLoaded = new ReplaySubject();
this.canvas = document.createElement('canvas');
this.context = this.canvas.getContext('2d');
const reader = new FileReader();
if (data instanceof File) {
this.name = data.name;
}
fromEvent(reader, 'load').subscribe((e) => {
this.image.src = e.target.result;
});
fromEvent(this.image, 'load').subscribe((e) => {
this.imageLoaded.next(e);
});
reader.readAsDataURL(data);
}
get ready() {
return this.imageLoaded.asObservable();
}
apply(feature, ...args) {
this.ready.subscribe(() => {
this.editor[feature].apply(this.context, this.image, ...args);
});
return this;
}
applyCustom(fn) {
this.ready.subscribe(() => {
fn(this.context, this.image);
});
return this;
}
getDataURL(type = 'image/png', quality = 0.92) {
this.dataURL = this.canvas.toDataURL(type, quality);
return this.dataURL;
}
getBlob(type = 'image/png', quality = 0.92) {
const base64 = this.canvas.toDataURL(type, quality);
const binStr = atob(base64.split(',')[1]);
const len = binStr.length;
const arr = new Uint8Array(len);
for (let i = 0; i < len; i++) {
arr[i] = binStr.charCodeAt(i);
}
this.blob = new Blob([arr], { type });
this.blob.hasDataURL = true;
this.blob.toJSON = function () {
return {
name: this.name,
size: this.size,
type: this.type,
dataURL: base64,
};
};
this.blob.toString = this.blob.toJSON;
return this.blob;
}
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZWRpdGFibGUtaW1hZ2Uuc2VydmljZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL21jLWltYWdlLWVkaXRvci9zcmMvbGliL3NlcnZpY2VzL2VkaXRhYmxlLWltYWdlLnNlcnZpY2UudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLGFBQWEsRUFBYyxTQUFTLEVBQUUsTUFBTSxNQUFNLENBQUM7QUFPNUQsTUFBTSxPQUFPLG9CQUFvQjtJQVUvQixZQUNFLElBQWlCLEVBQ1AsTUFBaUQ7UUFBakQsV0FBTSxHQUFOLE1BQU0sQ0FBMkM7UUFUdEQsVUFBSyxHQUFxQixJQUFJLEtBQUssRUFBRSxDQUFDO1FBSW5DLGdCQUFXLEdBQXVCLElBQUksYUFBYSxFQUFPLENBQUM7UUFPbkUsSUFBSSxDQUFDLE1BQU0sR0FBRyxRQUFRLENBQUMsYUFBYSxDQUFDLFFBQVEsQ0FBQyxDQUFDO1FBQy9DLElBQUksQ0FBQyxPQUFPLEdBQUcsSUFBSSxDQUFDLE1BQU0sQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUE2QixDQUFDO1FBRXhFLE1BQU0sTUFBTSxHQUFHLElBQUksVUFBVSxFQUFFLENBQUM7UUFDaEMsSUFBSSxJQUFJLFlBQVksSUFBSSxFQUFFO1lBQ3hCLElBQUksQ0FBQyxJQUFJLEdBQUcsSUFBSSxDQUFDLElBQUksQ0FBQztTQUN2QjtRQUVELFNBQVMsQ0FBQyxNQUFNLEVBQUUsTUFBTSxDQUFDLENBQUMsU0FBUyxDQUFDLENBQUMsQ0FBUSxFQUFFLEVBQUU7WUFDL0MsSUFBSSxDQUFDLEtBQUssQ0FBQyxHQUFHLEdBQUksQ0FBQyxDQUFDLE1BQXFCLENBQUMsTUFBZ0IsQ0FBQztRQUM3RCxDQUFDLENBQUMsQ0FBQztRQUVILFNBQVMsQ0FBQyxJQUFJLENBQUMsS0FBSyxFQUFFLE1BQU0sQ0FBQyxDQUFDLFNBQVMsQ0FBQyxDQUFDLENBQVEsRUFBRSxFQUFFO1lBQ25ELElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxDQUFDO1FBQzNCLENBQUMsQ0FBQyxDQUFDO1FBRUgsTUFBTSxDQUFDLGFBQWEsQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUM3QixDQUFDO0lBRUQsSUFBSSxLQUFLO1FBQ1AsT0FBTyxJQUFJLENBQUMsV0FBVyxDQUFDLFlBQVksRUFBRSxDQUFDO0lBQ3pDLENBQUM7SUFFRCxLQUFLLENBQUMsT0FBZSxFQUFFLEdBQUcsSUFBZ0I7UUFDeEMsSUFBSSxDQUFDLEtBQUssQ0FBQyxTQUFTLENBQUMsR0FBRyxFQUFFO1lBQ3hCLElBQUksQ0FBQyxNQUFNLENBQUMsT0FBTyxDQUFDLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxPQUFPLEVBQUUsSUFBSSxDQUFDLEtBQUssRUFBRSxHQUFHLElBQUksQ0FBQyxDQUFDO1FBQ2hFLENBQUMsQ0FBQyxDQUFDO1FBQ0gsT0FBTyxJQUFJLENBQUM7SUFDZCxDQUFDO0lBRUQsV0FBVyxDQUFDLEVBQTRCO1FBQ3RDLElBQUksQ0FBQyxLQUFLLENBQUMsU0FBUyxDQUFDLEdBQUcsRUFBRTtZQUN4QixFQUFFLENBQUMsSUFBSSxDQUFDLE9BQU8sRUFBRSxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDL0IsQ0FBQyxDQUFDLENBQUM7UUFDSCxPQUFPLElBQUksQ0FBQztJQUNkLENBQUM7SUFFRCxVQUFVLENBQUMsT0FBZSxXQUFXLEVBQUUsVUFBa0IsSUFBSTtRQUMzRCxJQUFJLENBQUMsT0FBTyxHQUFHLElBQUksQ0FBQyxNQUFNLENBQUMsU0FBUyxDQUFDLElBQUksRUFBRSxPQUFPLENBQUMsQ0FBQztRQUNwRCxPQUFPLElBQUksQ0FBQyxPQUFPLENBQUM7SUFDdEIsQ0FBQztJQUVELE9BQU8sQ0FBQyxPQUFlLFdBQVcsRUFBRSxVQUFrQixJQUFJO1FBQ3hELE1BQU0sTUFBTSxHQUFHLElBQUksQ0FBQyxNQUFNLENBQUMsU0FBUyxDQUFDLElBQUksRUFBRSxPQUFPLENBQUMsQ0FBQztRQUNwRCxNQUFNLE1BQU0sR0FBRyxJQUFJLENBQUMsTUFBTSxDQUFDLEtBQUssQ0FBQyxHQUFHLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDO1FBQzFDLE1BQU0sR0FBRyxHQUFHLE1BQU0sQ0FBQyxNQUFNLENBQUM7UUFDMUIsTUFBTSxHQUFHLEdBQUcsSUFBSSxVQUFVLENBQUMsR0FBRyxDQUFDLENBQUM7UUFFaEMsS0FBSyxJQUFJLENBQUMsR0FBRyxDQUFDLEVBQUUsQ0FBQyxHQUFHLEdBQUcsRUFBRSxDQUFDLEVBQUUsRUFBRTtZQUM1QixHQUFHLENBQUMsQ0FBQyxDQUFDLEdBQUcsTUFBTSxDQUFDLFVBQVUsQ0FBQyxDQUFDLENBQUMsQ0FBQztTQUMvQjtRQUVELElBQUksQ0FBQyxJQUFJLEdBQUcsSUFBSSxJQUFJLENBQUMsQ0FBQyxHQUFHLENBQUMsRUFBRSxFQUFFLElBQUksRUFBRSxDQUFDLENBQUM7UUFDckMsSUFBSSxDQUFDLElBQVksQ0FBQyxVQUFVLEdBQUcsSUFBSSxDQUFDO1FBQ3BDLElBQUksQ0FBQyxJQUFZLENBQUMsTUFBTSxHQUFHO1lBQzFCLE9BQU87Z0JBQ0wsSUFBSSxFQUFFLElBQUksQ0FBQyxJQUFJO2dCQUNmLElBQUksRUFBRSxJQUFJLENBQUMsSUFBSTtnQkFDZixJQUFJLEVBQUUsSUFBSSxDQUFDLElBQUk7Z0JBQ2YsT0FBTyxFQUFFLE1BQU07YUFDaEIsQ0FBQztRQUNKLENBQUMsQ0FBQztRQUNGLElBQUksQ0FBQyxJQUFJLENBQUMsUUFBUSxHQUFJLElBQUksQ0FBQyxJQUFZLENBQUMsTUFBTSxDQUFDO1FBQy9DLE9BQU8sSUFBSSxDQUFDLElBQUksQ0FBQztJQUNuQixDQUFDO0NBQ0YiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBSZXBsYXlTdWJqZWN0LCBPYnNlcnZhYmxlLCBmcm9tRXZlbnQgfSBmcm9tICdyeGpzJztcblxuaW1wb3J0IHtcbiAgSW1hZ2VFZGl0b3JGZWF0dXJlLFxuICBDdXN0b21JbWFnZUVkaXRvckZlYXR1cmUsXG59IGZyb20gJy4uL21vZGVscy9pbWFnZS1lZGl0b3ItZmVhdHVyZS5tb2RlbCc7XG5cbmV4cG9ydCBjbGFzcyBFZGl0YWJsZUltYWdlU2VydmljZSB7XG4gIHB1YmxpYyBjb250ZXh0OiBDYW52YXNSZW5kZXJpbmdDb250ZXh0MkQ7XG4gIHB1YmxpYyBjYW52YXM6IEhUTUxDYW52YXNFbGVtZW50O1xuICBwdWJsaWMgaW1hZ2U6IEhUTUxJbWFnZUVsZW1lbnQgPSBuZXcgSW1hZ2UoKTtcblxuICBwcm90ZWN0ZWQgZGF0YVVSTDogc3RyaW5nO1xuICBwcm90ZWN0ZWQgYmxvYjogQmxvYjtcbiAgcHJvdGVjdGVkIGltYWdlTG9hZGVkOiBSZXBsYXlTdWJqZWN0PGFueT4gPSBuZXcgUmVwbGF5U3ViamVjdDxhbnk+KCk7XG4gIHByb3RlY3RlZCBuYW1lOiBzdHJpbmc7XG5cbiAgY29uc3RydWN0b3IoXG4gICAgZGF0YTogQmxvYiB8IEZpbGUsXG4gICAgcHJvdGVjdGVkIGVkaXRvcjogeyBbZmVhdHVyZTogc3RyaW5nXTogSW1hZ2VFZGl0b3JGZWF0dXJlIH1cbiAgKSB7XG4gICAgdGhpcy5jYW52YXMgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCdjYW52YXMnKTtcbiAgICB0aGlzLmNvbnRleHQgPSB0aGlzLmNhbnZhcy5nZXRDb250ZXh0KCcyZCcpIGFzIENhbnZhc1JlbmRlcmluZ0NvbnRleHQyRDtcblxuICAgIGNvbnN0IHJlYWRlciA9IG5ldyBGaWxlUmVhZGVyKCk7XG4gICAgaWYgKGRhdGEgaW5zdGFuY2VvZiBGaWxlKSB7XG4gICAgICB0aGlzLm5hbWUgPSBkYXRhLm5hbWU7XG4gICAgfVxuXG4gICAgZnJvbUV2ZW50KHJlYWRlciwgJ2xvYWQnKS5zdWJzY3JpYmUoKGU6IEV2ZW50KSA9PiB7XG4gICAgICB0aGlzLmltYWdlLnNyYyA9IChlLnRhcmdldCBhcyBGaWxlUmVhZGVyKS5yZXN1bHQgYXMgc3RyaW5nO1xuICAgIH0pO1xuXG4gICAgZnJvbUV2ZW50KHRoaXMuaW1hZ2UsICdsb2FkJykuc3Vic2NyaWJlKChlOiBFdmVudCkgPT4ge1xuICAgICAgdGhpcy5pbWFnZUxvYWRlZC5uZXh0KGUpO1xuICAgIH0pO1xuXG4gICAgcmVhZGVyLnJlYWRBc0RhdGFVUkwoZGF0YSk7XG4gIH1cblxuICBnZXQgcmVhZHkoKTogT2JzZXJ2YWJsZTxhbnk+IHtcbiAgICByZXR1cm4gdGhpcy5pbWFnZUxvYWRlZC5hc09ic2VydmFibGUoKTtcbiAgfVxuXG4gIGFwcGx5KGZlYXR1cmU6IHN0cmluZywgLi4uYXJnczogQXJyYXk8YW55Pik6IEVkaXRhYmxlSW1hZ2VTZXJ2aWNlIHtcbiAgICB0aGlzLnJlYWR5LnN1YnNjcmliZSgoKSA9PiB7XG4gICAgICB0aGlzLmVkaXRvcltmZWF0dXJlXS5hcHBseSh0aGlzLmNvbnRleHQsIHRoaXMuaW1hZ2UsIC4uLmFyZ3MpO1xuICAgIH0pO1xuICAgIHJldHVybiB0aGlzO1xuICB9XG5cbiAgYXBwbHlDdXN0b20oZm46IEN1c3RvbUltYWdlRWRpdG9yRmVhdHVyZSkge1xuICAgIHRoaXMucmVhZHkuc3Vic2NyaWJlKCgpID0+IHtcbiAgICAgIGZuKHRoaXMuY29udGV4dCwgdGhpcy5pbWFnZSk7XG4gICAgfSk7XG4gICAgcmV0dXJuIHRoaXM7XG4gIH1cblxuICBnZXREYXRhVVJMKHR5cGU6IHN0cmluZyA9ICdpbWFnZS9wbmcnLCBxdWFsaXR5OiBudW1iZXIgPSAwLjkyKTogc3RyaW5nIHtcbiAgICB0aGlzLmRhdGFVUkwgPSB0aGlzLmNhbnZhcy50b0RhdGFVUkwodHlwZSwgcXVhbGl0eSk7XG4gICAgcmV0dXJuIHRoaXMuZGF0YVVSTDtcbiAgfVxuXG4gIGdldEJsb2IodHlwZTogc3RyaW5nID0gJ2ltYWdlL3BuZycsIHF1YWxpdHk6IG51bWJlciA9IDAuOTIpOiBCbG9iIHtcbiAgICBjb25zdCBiYXNlNjQgPSB0aGlzLmNhbnZhcy50b0RhdGFVUkwodHlwZSwgcXVhbGl0eSk7XG4gICAgY29uc3QgYmluU3RyID0gYXRvYihiYXNlNjQuc3BsaXQoJywnKVsxXSk7XG4gICAgY29uc3QgbGVuID0gYmluU3RyLmxlbmd0aDtcbiAgICBjb25zdCBhcnIgPSBuZXcgVWludDhBcnJheShsZW4pO1xuXG4gICAgZm9yIChsZXQgaSA9IDA7IGkgPCBsZW47IGkrKykge1xuICAgICAgYXJyW2ldID0gYmluU3RyLmNoYXJDb2RlQXQoaSk7XG4gICAgfVxuXG4gICAgdGhpcy5ibG9iID0gbmV3IEJsb2IoW2Fycl0sIHsgdHlwZSB9KTtcbiAgICAodGhpcy5ibG9iIGFzIGFueSkuaGFzRGF0YVVSTCA9IHRydWU7XG4gICAgKHRoaXMuYmxvYiBhcyBhbnkpLnRvSlNPTiA9IGZ1bmN0aW9uICgpIHtcbiAgICAgIHJldHVybiB7XG4gICAgICAgIG5hbWU6IHRoaXMubmFtZSxcbiAgICAgICAgc2l6ZTogdGhpcy5zaXplLFxuICAgICAgICB0eXBlOiB0aGlzLnR5cGUsXG4gICAgICAgIGRhdGFVUkw6IGJhc2U2NCxcbiAgICAgIH07XG4gICAgfTtcbiAgICB0aGlzLmJsb2IudG9TdHJpbmcgPSAodGhpcy5ibG9iIGFzIGFueSkudG9KU09OO1xuICAgIHJldHVybiB0aGlzLmJsb2I7XG4gIH1cbn1cbiJdfQ==