@syncfusion/ej2-image-editor 21.1.35 → 21.1.36

package/src/image-editor/action/export.d.ts

@@ -0,0 +1,23 @@
+import { ImageEditor } from '../index';
+export declare class Export {
+    private parent;
+    private lowerContext;
+    constructor(parent: ImageEditor);
+    destroy(): void;
+    private addEventListener;
+    private removeEventListener;
+    private export;
+    getModuleName(): string;
+    private updatePvtVar;
+    private exportImg;
+    private beforeSaveEvent;
+    private toSVGImg;
+    private toBlobFn;
+    private exportToCanvas;
+    private downloadImg;
+    private exportTransformedImage;
+    private exportRotate;
+    private exportFlip;
+    private updateSaveContext;
+    private setMaxDim;
+}

package/src/image-editor/action/export.js

@@ -0,0 +1,364 @@
+import { extend, isBlazor, isNullOrUndefined } from '@syncfusion/ej2-base';
+import { hideSpinner, showSpinner } from '@syncfusion/ej2-popups';
+var Export = /** @class */ (function () {
+    function Export(parent) {
+        this.parent = parent;
+        this.addEventListener();
+    }
+    Export.prototype.destroy = function () {
+        if (this.parent.isDestroyed) {
+            return;
+        }
+        this.removeEventListener();
+    };
+    Export.prototype.addEventListener = function () {
+        this.parent.on('export', this.export, this);
+        this.parent.on('destroyed', this.destroy, this);
+    };
+    Export.prototype.removeEventListener = function () {
+        this.parent.off('export', this.export);
+        this.parent.off('destroyed', this.destroy);
+    };
+    Export.prototype.export = function (args) {
+        if (isBlazor()) {
+            var obj = { shape: '' };
+            this.parent.notify('selection', { prop: 'getCurrentDrawingShape', onPropertyChange: false, value: { obj: obj } });
+            if (obj['shape'] !== '') {
+                this.parent.notify('selection', { prop: 'setCurrentDrawingShape', onPropertyChange: false, value: { value: '' } });
+                this.parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
+            }
+        }
+        else {
+            this.parent.notify('toolbar', { prop: 'refreshShapeDrawing', onPropertyChange: false });
+        }
+        this.updatePvtVar();
+        switch (args.prop) {
+            case 'export':
+                this.exportImg(args.value['type'], args.value['fileName']);
+                break;
+            case 'exportToCanvas':
+                this.exportToCanvas(args.value['object']);
+                break;
+        }
+    };
+    Export.prototype.getModuleName = function () {
+        return 'export';
+    };
+    Export.prototype.updatePvtVar = function () {
+        var parent = this.parent;
+        if (parent.lowerCanvas) {
+            this.lowerContext = parent.lowerCanvas.getContext('2d');
+        }
+    };
+    Export.prototype.exportImg = function (type, fileName) {
+        var _this = this;
+        var parent = this.parent;
+        var obj = { fileName: '' };
+        parent.notify('draw', { prop: 'getFileName', onPropertyChange: false, value: { obj: obj } });
+        var imageName = obj['fileName'];
+        if (!parent.disabled && parent.isImageLoaded) {
+            var dummyObj = { bool: false };
+            parent.notify('selection', { prop: 'getFreehandDrawEditing', onPropertyChange: false, value: { obj: dummyObj } });
+            if (dummyObj['bool']) {
+                parent.notify('freehand-draw', { prop: 'applyFhd', onPropertyChange: false });
+            }
+            if (parent.togglePen) {
+                parent.currObjType.isZoomed = true;
+                parent.notify('shape', { prop: 'apply', onPropertyChange: false, value: { shape: null, obj: null, canvas: null } });
+            }
+            if (parent.textArea.style.display === 'block') {
+                parent.notify('shape', { prop: 'redrawActObj', onPropertyChange: false,
+                    value: { x: null, y: null, isMouseDown: null } });
+            }
+            parent.notify('shape', { prop: 'applyActObj', onPropertyChange: false, value: { isMouseDown: null } });
+            var obj_1 = { canvasFilter: this.parent.canvasFilter };
+            this.lowerContext.filter = obj_1['canvasFilter'];
+            type = type ? type : 'Png';
+            parent.notify('shape', { prop: 'redrawActObj', onPropertyChange: false,
+                value: { x: null, y: null, isMouseDown: null } });
+            var beforeSave = { cancel: false, fileName: fileName ? fileName : imageName,
+                fileType: type };
+            if (isBlazor() && parent.events && parent.events.saving.hasDelegate === true) {
+                /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+                parent.dotNetRef.invokeMethodAsync('BeforeSaveEventAsync', 'BeforeSave', beforeSave).then(function (beforeSave) {
+                    _this.beforeSaveEvent(beforeSave, type, fileName, imageName);
+                });
+            }
+            else {
+                parent.trigger('beforeSave', beforeSave);
+                this.beforeSaveEvent(beforeSave, type, fileName, imageName);
+            }
+        }
+    };
+    Export.prototype.beforeSaveEvent = function (observableSaveArgs, type, fileName, imageName) {
+        var parent = this.parent;
+        if (!observableSaveArgs.cancel) {
+            parent.currObjType.isSave = true;
+            fileName = observableSaveArgs.fileName ? observableSaveArgs.fileName : fileName;
+            var lowerCaseType = type.toLowerCase();
+            fileName = fileName || imageName;
+            if (lowerCaseType === 'svg') {
+                this.toSVGImg(fileName);
+            }
+            else {
+                this.toBlobFn(fileName, lowerCaseType);
+            }
+            var saved = { fileName: fileName ? fileName : imageName, fileType: type };
+            parent.trigger('saved', saved);
+            if (!isBlazor()) {
+                parent.notify('toolbar', { prop: 'refresh-main-toolbar', onPropertyChange: false });
+            }
+            parent.lowerCanvas.style.left = parent.upperCanvas.style.left = '';
+            parent.lowerCanvas.style.top = parent.upperCanvas.style.top = '';
+            parent.lowerCanvas.style.maxWidth = parent.upperCanvas.style.maxWidth = '';
+            parent.lowerCanvas.style.maxHeight = parent.upperCanvas.style.maxHeight = '';
+        }
+    };
+    Export.prototype.toSVGImg = function (fileName) {
+        var parent = this.parent;
+        showSpinner(parent.element);
+        parent.element.style.opacity = '0.5';
+        var tempCanvas = this.exportToCanvas();
+        var dataUrl = tempCanvas.toDataURL();
+        hideSpinner(parent.element);
+        parent.element.style.opacity = '1';
+        var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        svg.setAttribute('width', tempCanvas.style.maxWidth);
+        svg.setAttribute('height', tempCanvas.style.maxHeight);
+        var XLinkNS = 'http://www.w3.org/1999/xlink';
+        var img = document.createElementNS('http://www.w3.org/2000/svg', 'image');
+        img.setAttributeNS(null, 'height', tempCanvas.height.toString());
+        img.setAttributeNS(null, 'width', tempCanvas.width.toString());
+        img.setAttributeNS(XLinkNS, 'xlink:href', dataUrl);
+        svg.appendChild(img);
+        var prefix = 'data:image/svg+xml;base64,';
+        var header = '<svg' + ' xmlns="http://www.w3.org/2000/svg"' + ' xmlns:xlink="http://www.w3.org/1999/xlink"'
+            + (" width=\"" + tempCanvas.width + "\"") + (" height=\"" + tempCanvas.height + "\"") + '>';
+        var footer = '</svg>';
+        var body = svg.innerHTML;
+        var data = header + body + footer;
+        var svgDataUrl = prefix + btoa(data);
+        if (fileName === null) {
+            return svgDataUrl;
+        }
+        else {
+            this.downloadImg(svgDataUrl, fileName + '.' + 'svg');
+            return null;
+        }
+    };
+    Export.prototype.toBlobFn = function (fileName, type) {
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        var proxy = this;
+        var parent = this.parent;
+        showSpinner(parent.element);
+        parent.element.style.opacity = '0.5';
+        var tempCanvas = this.exportToCanvas();
+        // eslint-disable-next-line @typescript-eslint/tslint/config
+        tempCanvas.toBlob(function (blob) {
+            var blobUrl = URL.createObjectURL(blob);
+            proxy.downloadImg(blobUrl, fileName + '.' + type);
+            hideSpinner(parent.element);
+            parent.element.style.opacity = '1';
+        }, 'image/png');
+    };
+    Export.prototype.exportToCanvas = function (object) {
+        var parent = this.parent;
+        var obj = { width: 0, height: 0 };
+        parent.notify('crop', { prop: 'calcRatio', onPropertyChange: false, value: { obj: obj } });
+        var ratio = obj;
+        var tempContextFilter = this.lowerContext.filter;
+        // Manipulating blur value
+        if (this.lowerContext.filter !== 'none') {
+            var splitWords = this.lowerContext.filter.split(' ');
+            var value = parseFloat(splitWords[5].split('(')[1]);
+            value *= ((ratio.width + ratio.height) / 2);
+            splitWords[5] = 'blur(' + value + 'px)';
+            this.lowerContext.filter = splitWords.join(' ');
+        }
+        var maxDimension;
+        var tempCanvas = parent.createElement('canvas', {
+            id: parent.element.id + '_tempCanvas', attrs: { name: 'canvasImage' }
+        });
+        var tempContext = tempCanvas.getContext('2d');
+        tempContext.filter = this.lowerContext.filter;
+        if (parent.currSelectionPoint) {
+            tempCanvas.width = parent.img.destWidth;
+            tempCanvas.height = parent.img.destHeight;
+            tempContext.filter = this.lowerContext.filter;
+            var temp = this.lowerContext.filter;
+            parent.notify('filter', { prop: 'updateBrightFilter', onPropertyChange: false });
+            tempContext.drawImage(parent.baseImg, parent.img.srcLeft, parent.img.srcTop, parent.img.srcWidth, parent.img.srcHeight, 0, 0, parent.img.destWidth, parent.img.destHeight);
+            this.lowerContext.filter = temp;
+        }
+        else {
+            tempCanvas.width = parent.baseImg.width;
+            tempCanvas.height = parent.baseImg.height;
+            var obj_2 = { width: 0, height: 0 };
+            parent.notify('transform', { prop: 'calcMaxDimension', onPropertyChange: false,
+                value: { width: parent.baseImg.width, height: parent.baseImg.height, obj: obj_2 } });
+            maxDimension = obj_2;
+            tempCanvas.style.maxWidth = maxDimension.width + 'px';
+            tempCanvas.style.maxHeight = maxDimension.height + 'px';
+            tempContext.filter = this.lowerContext.filter;
+            var temp = this.lowerContext.filter;
+            parent.notify('filter', { prop: 'updateBrightFilter', onPropertyChange: false });
+            tempContext.drawImage(parent.baseImg, parent.img.srcLeft, parent.img.srcTop, parent.img.srcWidth, parent.img.srcHeight, 0, 0, parent.baseImg.width, parent.baseImg.height);
+            this.lowerContext.filter = temp;
+        }
+        if (parent.transform.degree !== 0 || parent.transform.currFlipState !== '') {
+            this.updateSaveContext(tempContext);
+            this.exportTransformedImage(tempContext);
+        }
+        if (parent.objColl.length > 0) {
+            var temp = tempContext.filter;
+            tempContext.filter = 'none';
+            var tempObjColl = extend([], parent.objColl, [], true);
+            for (var i = 0, len = parent.objColl.length; i < len; i++) {
+                var activePoint = parent.objColl[i].activePoint;
+                // Subtracting destination left and top points
+                activePoint.startX -= parent.img.destLeft;
+                activePoint.startY -= parent.img.destTop;
+                activePoint.endX -= parent.img.destLeft;
+                activePoint.endY -= parent.img.destTop;
+                activePoint.width = activePoint.endX - activePoint.startX;
+                activePoint.height = activePoint.endY - activePoint.startY;
+                // Manipulating points
+                if (isNullOrUndefined(parent.currSelectionPoint)) {
+                    activePoint.startX *= ratio.width;
+                    activePoint.startY *= ratio.height;
+                    activePoint.endX *= ratio.width;
+                    activePoint.endY *= ratio.height;
+                    activePoint.width = activePoint.endX - activePoint.startX;
+                    activePoint.height = activePoint.endY - activePoint.startY;
+                    parent.objColl[i].strokeSettings.strokeWidth *= ((ratio.width + ratio.height) / 2);
+                    if (parent.objColl[i].shape === 'text') {
+                        parent.objColl[i].textSettings.fontSize *= ((ratio.width + ratio.height) / 2);
+                    }
+                }
+                parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'saveContext', obj: parent.objColl[i], isCropRatio: null,
+                        points: null, isPreventDrag: true, saveContext: tempContext, isPreventSelection: null } });
+            }
+            tempContext.filter = temp;
+            parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
+            parent.objColl = tempObjColl;
+        }
+        if (parent.freehandCounter > 0) {
+            // eslint-disable-next-line
+            var tempPointColl = extend({}, parent.pointColl, {}, true);
+            for (var n = 0; n < parent.freehandCounter; n++) {
+                parent.points = extend([], parent.pointColl[n].points, []);
+                parent.notify('freehand-draw', { prop: 'setPointCounter', onPropertyChange: false, value: { value: 0 } });
+                var len = parent.points.length;
+                if (parent.currSelectionPoint) {
+                    for (var l = 0; l < len; l++) {
+                        parent.points[l].x -= parent.img.destLeft;
+                        parent.points[l].y -= parent.img.destTop;
+                    }
+                }
+                else {
+                    parent.pointColl[n].strokeWidth *= ((ratio.width + ratio.height) / 2);
+                    for (var l = 0; l < len; l++) {
+                        parent.points[l].x = (parent.points[l].x - parent.img.destLeft) * ratio.width;
+                        parent.points[l].y = (parent.points[l].y - parent.img.destTop) * ratio.height;
+                    }
+                }
+            }
+            parent.notify('freehand-draw', { prop: 'freehandRedraw', onPropertyChange: false,
+                value: { context: tempContext, points: null } });
+            parent.pointColl = tempPointColl;
+        }
+        if (parent.isCircleCrop) {
+            parent.notify('crop', { prop: 'cropCircle', onPropertyChange: false,
+                value: { context: tempContext, isSave: true, isFlip: null } });
+        }
+        this.lowerContext.filter = tempContextFilter;
+        if (object) {
+            object['canvas'] = tempCanvas;
+        }
+        return tempCanvas;
+    };
+    Export.prototype.downloadImg = function (blob, fileName) {
+        var a = document.createElement('a');
+        a.href = blob;
+        a.target = '_parent';
+        a.download = fileName;
+        (document.body || document.documentElement).appendChild(a);
+        a.click();
+        a.parentNode.removeChild(a);
+    };
+    Export.prototype.exportTransformedImage = function (tempContext) {
+        var parent = this.parent;
+        var degree = parent.transform.degree;
+        for (var i = 0, len = parent.rotateFlipColl.length; i < len; i++) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            var flip = parent.rotateFlipColl[i];
+            if (typeof flip === 'number') {
+                this.exportRotate(tempContext, flip);
+            }
+            else if (flip === 'horizontal') {
+                this.exportFlip(tempContext, true, false);
+            }
+            else if (flip === 'vertical') {
+                this.exportFlip(tempContext, false, true);
+            }
+        }
+        parent.transform.degree = degree;
+    };
+    Export.prototype.exportRotate = function (tempContext, degree) {
+        var parent = this.parent;
+        if (isNullOrUndefined(parent.currSelectionPoint)) {
+            this.setMaxDim(parent.transform.degree, tempContext.canvas);
+            tempContext.translate(tempContext.canvas.width / 2, tempContext.canvas.height / 2);
+            tempContext.rotate(Math.PI / 180 * degree);
+            tempContext.drawImage(parent.inMemoryCanvas, parent.img.srcLeft, parent.img.srcTop, parent.img.srcWidth, parent.img.srcHeight, -tempContext.canvas.height / 2, -tempContext.canvas.width / 2, tempContext.canvas.height, tempContext.canvas.width);
+        }
+        else {
+            tempContext.translate(tempContext.canvas.width / 2, tempContext.canvas.height / 2);
+            tempContext.rotate(Math.PI / 180 * degree);
+            tempContext.drawImage(parent.inMemoryCanvas, -tempContext.canvas.height / 2, -tempContext.canvas.width / 2, tempContext.canvas.height, tempContext.canvas.width);
+        }
+        this.updateSaveContext(tempContext);
+    };
+    Export.prototype.exportFlip = function (tempContext, flipHorizontal, flipVertical) {
+        if (flipHorizontal) {
+            tempContext.translate(tempContext.canvas.width, 0);
+            tempContext.scale(-1, 1);
+        }
+        if (flipVertical) {
+            tempContext.translate(0, tempContext.canvas.height);
+            tempContext.scale(1, -1);
+        }
+        tempContext.drawImage(this.parent.inMemoryCanvas, 0, 0);
+        this.updateSaveContext(tempContext);
+    };
+    Export.prototype.updateSaveContext = function (tempContext) {
+        var inMemoryContext = this.parent.inMemoryCanvas.getContext('2d');
+        tempContext.setTransform(1, 0, 0, 1, 0, 0);
+        var imageData = tempContext.getImageData(0, 0, tempContext.canvas.width, tempContext.canvas.height);
+        this.parent.inMemoryCanvas.width = imageData.width;
+        this.parent.inMemoryCanvas.height = imageData.height;
+        inMemoryContext.putImageData(imageData, 0, 0);
+    };
+    Export.prototype.setMaxDim = function (degree, tempCanvas) {
+        var newWidth;
+        var newHeight;
+        if (degree % 90 === 0 && degree % 180 !== 0) {
+            newWidth = this.parent.baseImg.height;
+            newHeight = this.parent.baseImg.width;
+        }
+        else if (degree % 180 === 0 || degree === 0) {
+            newWidth = this.parent.baseImg.width;
+            newHeight = this.parent.baseImg.height;
+        }
+        tempCanvas.width = newWidth;
+        tempCanvas.height = newHeight;
+        var obj = { width: 0, height: 0 };
+        this.parent.notify('transform', { prop: 'calcMaxDimension', onPropertyChange: false,
+            value: { width: newWidth, height: newHeight, obj: obj } });
+        var maxDimension = obj;
+        tempCanvas.style.maxWidth = maxDimension.width + 'px';
+        tempCanvas.style.maxHeight = maxDimension.height + 'px';
+    };
+    return Export;
+}());
+export { Export };

package/src/image-editor/action/filter.d.ts

@@ -0,0 +1,35 @@
+import { ImageEditor } from '../index';
+export declare class Filter {
+    private parent;
+    private lowerContext;
+    private adjustmentLevel;
+    private tempAdjustmentLevel;
+    private adjustmentValue;
+    private isBrightnessAdjusted;
+    private appliedFilter;
+    constructor(parent: ImageEditor);
+    destroy(): void;
+    private addEventListener;
+    private removeEventListener;
+    private filter;
+    private updatePrivateVariables;
+    getModuleName(): string;
+    private updateBrightFilter;
+    private reset;
+    private updateFinetunes;
+    private initFilter;
+    private updateAdj;
+    private setTempFilterValue;
+    private getDefaultCurrentFilter;
+    private getFilterValue;
+    private getSaturationFilterValue;
+    private setFilterAdj;
+    private setFilter;
+    private setAdjustment;
+    private setFilterValue;
+    private setSaturationFilterValue;
+    private updateFilter;
+    private finetuneImage;
+    private setCurrAdjValue;
+    private getCurrentObj;
+}