canvas-editor-engine 1.1.16 → 1.1.18

package/dist/filters/collection/vague.d.ts

@@ -6,6 +6,7 @@ export default class VagueFilter extends Filter {
     constructor(ctx: CanvasRenderingContext2D, options: IImageOptions);
     on(action: TFilterMethod, filterOptions: IFilterOptions): Promise<IImageLoggingDataVague>;
     pixel(imageData: ImageData, filterOptions: IFilterOptions): ImageData;
+    private getQualityProcessedRemainder;
     private getQualityBuff;
     private getMostCommonQuanlityBuff;
     private getMostCommonElement;

package/dist/filters/collection/vague.js

@@ -31,14 +31,16 @@ class VagueFilter extends filter_1.Filter {
         });
     }
     pixel(imageData, filterOptions) {
+        const { quality } = filterOptions;
+        console.log('quality', quality);
+        const processedImageData = this.getQualityProcessedRemainder(imageData, +quality);
         const imageSize = {
-            width: imageData.width,
-            height: imageData.height,
+            width: processedImageData.width,
+            height: processedImageData.height,
         };
+        console.log('imageSize', imageSize);
         this.setImageSize(imageSize);
-        const { quality } = filterOptions;
-        console.log('quality', quality);
-        const { rowRGBABuff, buff } = this.getBuffCollection(imageData);
+        const { rowRGBABuff, buff } = this.getBuffCollection(processedImageData);
         const { qualityBuff, rangeCommit } = this.getQualityBuff(buff, +quality);
         const qualityBuffWithMostCommonElement = this.getMostCommonQuanlityBuff(qualityBuff, rangeCommit);
         const rowQualityBuffWithMostCommonElement = qualityBuffWithMostCommonElement.flat();
@@ -50,11 +52,36 @@ class VagueFilter extends filter_1.Filter {
             });
             const rowBuff = occurrenceRGBAbuff.flat();
             rowBuff.forEach((color, index) => {
-                imageData.data[index] = color;
+                processedImageData.data[index] = color;
             });
-            console.log('imageData', imageData);
         }
-        return imageData;
+        return processedImageData;
+    }
+    getQualityProcessedRemainder(imageData, quality) {
+        const rowRGBABuff = this.getRowRGBABuff(imageData);
+        const RGBAMatrix = this.getRGBAMatrix(rowRGBABuff, { width: imageData.width, height: imageData.height });
+        const cqx = quality - (imageData.width % quality);
+        const cqy = quality - (imageData.height % quality);
+        const xCommit = (0, lodash_1.range)(0, cqx);
+        const yCommit = (0, lodash_1.range)(0, cqy);
+        const tempSize = {
+            width: imageData.width + cqx,
+            height: imageData.height + cqy,
+        };
+        const xLastIndex = RGBAMatrix[0].length - 1;
+        RGBAMatrix.forEach((row, y) => {
+            const xLastRGBAByte = row[xLastIndex];
+            xCommit.forEach(() => RGBAMatrix[y].push(xLastRGBAByte));
+        });
+        const yLastIndex = RGBAMatrix.length - 1;
+        const yLastRGBARow = RGBAMatrix[yLastIndex];
+        yCommit.forEach(() => RGBAMatrix.push(yLastRGBARow));
+        const buffWithRemainder = RGBAMatrix.flat(2);
+        const tempCanvas = document.createElement('canvas');
+        const tempCtx = tempCanvas.getContext('2d');
+        const tempImageData = tempCtx.createImageData(tempSize.width, tempSize.height);
+        buffWithRemainder.forEach((_, i) => tempImageData.data[i] = buffWithRemainder[i]);
+        return tempImageData;
     }
     getQualityBuff(buff, quality) {
         const wq = Math.floor(this.imageSize.width / quality);

package/dist/utils/filter.d.ts

@@ -1,5 +1,5 @@
 import { IExtendedImageDataModel, type IImageOptions, type IImageSize, type TBuff, type TRGBABuff } from "../types/image";
-import type { ISize } from '../types/general';
+import type { ISize, THEXColor } from '../types/general';
 export declare class Filter {
     ctx: CanvasRenderingContext2D;
     imageSize: IImageSize;
@@ -15,7 +15,7 @@ export declare class Filter {
         hexBuff: `#${string}`[];
         buff: TBuff<string>;
     };
-    private getBuff;
-    private getRGBAMatrix;
-    private getRowRGBABuff;
+    getBuff(hexBuff: THEXColor[]): TBuff<string>;
+    getRGBAMatrix(rowRGBABuff: TRGBABuff, size?: ISize): TBuff<number[]>;
+    getRowRGBABuff(imageData: ImageData): TRGBABuff;
 }

package/dist/utils/filter.js

@@ -54,7 +54,7 @@ class Filter {
         };
     }
     getSizeOfSparseMatrix(RGBAMatrix, tempSize) {
-        // case 1: Xcanvas -> Ximage && case 3: Ycanvas -> Yimage
+        // case 1: Xcanvas -> Ximage && Ycanvas -> Yimage
         let leftIndex;
         let upIndex;
         for (const [iy, row] of RGBAMatrix.entries()) {
@@ -70,9 +70,7 @@ class Filter {
                 break;
             }
         }
-        console.log('case 1: Xcanvas -> Ximage; leftIndex:', leftIndex);
-        console.log('case 3: Ycanvas -> Yimage; upIndex:', upIndex);
-        // case 2: Ximage <- Xcanvas && case 4: Yimage <- Ycanvas
+        // case 2 reverse matrix: Ximage <- Xcanvas && Yimage <- Ycanvas
         let rightIndex;
         let downIndex;
         for (const [iy, row] of RGBAMatrix.reverse().entries()) {
@@ -88,8 +86,6 @@ class Filter {
                 break;
             }
         }
-        console.log('case 2: Ximage <- Xcanvas; rightIndex:', rightIndex);
-        console.log('case 4: Yimage <- Ycanvas; downIndex:', downIndex);
         const reduceWidth = (tempWidth) => tempWidth - (leftIndex + rightIndex);
         const reduceHeight = (tempHeight) => tempHeight - (upIndex + downIndex);
         const resultSize = {
@@ -117,7 +113,7 @@ class Filter {
         });
         return buff;
     }
-    getRGBAMatrix(RGBABuff, size) {
+    getRGBAMatrix(rowRGBABuff, size) {
         const maybeSize = {
             width: size.width || this.imageSize.width,
             height: size.height || this.imageSize.height,
@@ -125,7 +121,7 @@ class Filter {
         const distanceRow = (0, lodash_1.range)(0, maybeSize.height).map((i) => maybeSize.width * i);
         const buff = [];
         let indexOfDistance = 0;
-        RGBABuff.forEach((pxRGBA, pxIndex) => {
+        rowRGBABuff.forEach((pxRGBA, pxIndex) => {
             if (pxIndex >= distanceRow[indexOfDistance + 1]) {
                 indexOfDistance++;
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "canvas-editor-engine",
-  "version": "1.1.16",
+  "version": "1.1.18",
   "description": "CanvasEditorEngine library, use: [typescript] [canvas]",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",