ding-image-editor 3.15.8 → 3.15.10

package/index.d.ts

@@ -1,4 +1,4 @@
-// Type definitions for TOAST UI Image Editor v3.15.3
+// Type definitions for TOAST UI Image Editor v3.15.9
 // TypeScript Version: 3.2.2
 
 declare namespace tuiImageEditor {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ding-image-editor",
-  "version": "3.15.8",
+  "version": "3.15.10",
   "description": "TOAST UI ImageEditor",
   "keywords": [
     "nhn",

package/src/js/component/freeDrawing copy.js

@@ -18,6 +18,7 @@ class FreeDrawing extends Component {
      * @type {number}
      */
     this.width = 12;
+    this.pencilBrush = null;
 
     /**
      * fabric.Color instance for brush color
@@ -41,7 +42,7 @@ class FreeDrawing extends Component {
    * @param {{width: ?number, color: ?string}} [setting] - Brush width & color
    */
   start(setting) {
-    console.log(setting);
+    console.log('drawingsetting',setting);
     if (setting?.mosaic) {
       this.setMosaic(setting);
     } else {
@@ -57,7 +58,14 @@ class FreeDrawing extends Component {
    * @param {{width: ?number, color: ?string}} [setting] - Brush width & color
    */
   setBrush(setting) {
-    const brush = this.getCanvas().freeDrawingBrush;
+    const canvas =  this.getCanvas()
+    if(!this.pencilBrush){
+      this.pencilBrush = new fabric.PencilBrush(canvas)
+    }
+
+    canvas.freeDrawingBrush = this.pencilBrush;
+   
+    const brush = canvas.freeDrawingBrush;
 
     setting = setting || {};
     this.width = setting.width || this.width;
@@ -85,23 +93,74 @@ class FreeDrawing extends Component {
    */
   setMosaic(setting) {
     
-    this.imageEditor = setting.imageEditor;
-    this.width = setting.width;
     const canvas = this.getCanvas();
     canvas.selection = false;
     canvas.isDrawingMode = true;
+    const ctx = canvas.contextContainer;
+    const originalImageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+    console.log(originalImageData)
+
+    let mosaicImageData = this.toMosaicImageData(originalImageData);
+
+
+    const patternCanvas = fabric.document.createElement('canvas'); 
+    const patternCtx  = patternCanvas.getContext('2d');
+    patternCanvas.width = canvas.width
+    patternCanvas.height = canvas.height
+    patternCtx.putImageData(mosaicImageData,0,0)
 
-    const url = localStorage.getItem('mosaicImge')
-    console.log('mosic image',url)
-    var img222 = new Image();
-    img222.src = url;
     var texturePatternBrush = new fabric.PatternBrush(canvas);
-    texturePatternBrush.source = img222;
+    texturePatternBrush.source = patternCanvas;
     canvas.freeDrawingBrush = texturePatternBrush;
-    canvas.freeDrawingBrush.width=30
-    //canvas.on('mouse:down', this._handlers.mousedown);
+    canvas.freeDrawingBrush.width=setting.width
   }
 
+  toMosaicImageData(imageData) {
+		// 定义马赛克方格大小（越大越模糊）
+		const suquareSize = 50;
+		let data = imageData.data;
+    const canvas ={ width:imageData.width,height:imageData.height}
+		//首先根据宽高遍历整个图片获取到对应的方格
+		for (let i = 0; i < canvas.height; i += suquareSize) {
+			for (let j = 0; j < canvas.width; j += suquareSize) {
+				let totalR = 0;
+				let totalG = 0;
+				let totalB = 0;
+				let totalA = 0;
+				let count = 0;
+				//遍历当前方格的每个像素将其RGBA值累加起来
+				for (let y = i; y < i + suquareSize && y < canvas.height; y++) {
+					for (let x = j; x < j + suquareSize && x < canvas.width; x++) {
+						//y * canvas.width + x就能计算出当前像素在整个图片中的索引
+						//再乘以4是因为imageData.data每个像素用4个值表示
+						//pixelIndex就是当前像素在imageData.data的起始索引也就是它的R值
+						let pixelIndex = (y * canvas.width + x) * 4;
+						totalR += data[pixelIndex];
+						totalG += data[pixelIndex + 1];
+						totalB += data[pixelIndex + 2];
+						totalA += data[pixelIndex + 3];
+						count++;
+					}
+				}
+				let avgR = totalR / count;
+				let avgG = totalG / count;
+				let avgB = totalB / count;
+				let avgA = totalA / count;
+				// 遍历的逻辑与上面一模一样，这一步是将方格内的每个像素的RGBA值替换为平均值
+				for (let y = i; y < i + suquareSize && y < canvas.height; y++) {
+					for (let x = j; x < j + suquareSize && x < canvas.width; x++) {
+						let pixelIndex = (y * canvas.width + x) * 4;
+						data[pixelIndex] = avgR;
+						data[pixelIndex + 1] = avgG;
+						data[pixelIndex + 2] = avgB;
+						data[pixelIndex + 3] = avgA;
+					}
+				}
+			}
+		}
+		return imageData;
+	}
+
   /**
    * MouseDown event handler on canvas
    * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event object

package/src/js/component/freeDrawing.js

@@ -18,6 +18,8 @@ class FreeDrawing extends Component {
      * @type {number}
      */
     this.width = 12;
+    this.pencilBrush = null;
+    this.patternBrush = null;
 
     /**
      * fabric.Color instance for brush color
@@ -57,7 +59,14 @@ class FreeDrawing extends Component {
    * @param {{width: ?number, color: ?string}} [setting] - Brush width & color
    */
   setBrush(setting) {
-    const brush = this.getCanvas().freeDrawingBrush;
+    const canvas =  this.getCanvas()
+    if(!this.pencilBrush){
+      this.pencilBrush = new fabric.PencilBrush(canvas)
+    }
+
+    canvas.freeDrawingBrush = this.pencilBrush;
+   
+    const brush = canvas.freeDrawingBrush;
 
     setting = setting || {};
     this.width = setting.width || this.width;
@@ -85,11 +94,22 @@ class FreeDrawing extends Component {
    */
   setMosaic(setting) {
     
-    // this.imageEditor = setting.imageEditor;
-    // this.width = setting.width;
     const canvas = this.getCanvas();
     canvas.selection = false;
     canvas.isDrawingMode = true;
+
+    if(!this.patternBrush){
+      this.setPatternBrush()
+    }
+   
+    canvas.freeDrawingBrush = this.patternBrush;
+    canvas.freeDrawingBrush.width=setting.width
+  }
+
+  setPatternBrush() {
+
+    const canvas = this.getCanvas();
+    
     const ctx = canvas.contextContainer;
     const originalImageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
     console.log(originalImageData)
@@ -103,10 +123,11 @@ class FreeDrawing extends Component {
     patternCanvas.height = canvas.height
     patternCtx.putImageData(mosaicImageData,0,0)
 
-    var texturePatternBrush = new fabric.PatternBrush(canvas);
-    texturePatternBrush.source = patternCanvas;
-    canvas.freeDrawingBrush = texturePatternBrush;
-    canvas.freeDrawingBrush.width=setting.width
+    var patternBrush = new fabric.PatternBrush(canvas);
+    patternBrush.source = patternCanvas;
+
+    this.patternBrush  = patternBrush
+   
   }
 
   toMosaicImageData(imageData) {

package/src/js/component/text.js

@@ -502,9 +502,11 @@ class Text extends Component {
   _onFabricMouseDown(fEvent) {
     const obj = fEvent.target;
 
-    if (obj && !obj.isType('text')) {
-      return;
-    }
+    console.log(1111)
+
+    // if (obj && !obj.isType('text')) {
+    //   return;
+    // }
 
     // if (this.isPrevEditing) {
     //   this.isPrevEditing = false;
@@ -525,7 +527,7 @@ class Text extends Component {
     const e = fEvent.e || {};
     const originPointer = this.getCanvas().getPointer(e);
 
-    if (!obj) {
+    if (true) {
       this.fire(events.ADD_TEXT, {
         originPosition: {
           x: originPointer.x,