ding-image-editor 3.15.7 → 3.15.9

package/index.d.ts

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

package/package.json

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

package/src/js/component/cropper.js

@@ -103,8 +103,20 @@ class Cropper extends Component {
     canvas.add(this._cropzone);
     canvas.on('mouse:down', this._listeners.mousedown);
     canvas.selection = false;
-    canvas.defaultCursor = 'crosshair';
-
+    
+    const svgString = `<?xml version="1.0" encoding="UTF-8"?>
+      <svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <title>ddd</title>
+          <g id="1130" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+              <g id="dd" transform="translate(-775, -430)" fill="#2F2F46" fill-rule="nonzero" stroke="#FFFFFF" stroke-width="0.5">
+                  <path d="M786.750006,430.75 L786.749908,434.79455 C788.176052,434.965136 789.454697,435.615862 790.419417,436.580583 C791.384137,437.545303 792.034864,438.823948 792.20545,440.250092 L796.25,440.249994 L796.25,441.749944 L792.205337,441.750853 C792.034555,443.1768 791.383757,444.45524 790.419045,445.41979 C789.454368,446.384305 788.175868,447.034886 786.749908,447.20545 L786.750006,451.25 L785.250056,451.25 L785.249147,447.205337 C783.823384,447.034577 782.54509,446.383924 781.580583,445.419417 C780.616076,444.45491 779.965423,443.176616 779.794663,441.750853 L775.75,441.749944 L775.75,440.249994 L779.79455,440.250092 C779.965114,438.824132 780.615695,437.545632 781.58021,436.580955 C782.54476,435.616243 783.8232,434.965445 785.249147,434.794663 L785.250056,430.75 L786.750006,430.75 Z M785.249017,441.750039 L781.308947,441.750657 C781.469428,442.761766 781.949058,443.666572 782.641243,444.358757 C783.333413,445.050927 784.238196,445.530552 785.249279,445.691043 L785.249017,441.750039 Z M790.691053,441.750657 L786.749039,441.750039 L786.749655,445.691212 C787.761002,445.530915 788.666047,445.051328 789.358416,444.359098 C790.050784,443.66687 790.530546,442.761932 790.691053,441.750657 Z M785.249279,436.308957 C784.23803,436.469474 783.333116,436.94923 782.640902,437.641584 C781.948686,438.333939 781.469105,439.23896 781.308798,440.250281 L785.249017,440.250017 Z M786.749655,436.308788 L786.749039,440.250017 L790.691202,440.250281 C790.530869,439.238794 790.051156,438.333642 789.358757,437.641243 C788.666344,436.948829 787.761168,436.469111 786.749655,436.308788 Z" id="ss"></path>
+              </g>
+          </g>
+      </svg>
+    `
+    // 将 SVG 源码转换为 Base64 格式
+    const base64 = btoa(svgString);
+    canvas.defaultCursor = `url("data:image/svg+xml;base64,${base64}"),auto`;
     fabric.util.addListener(document, 'keydown', this._listeners.keydown);
     fabric.util.addListener(document, 'keyup', this._listeners.keyup);
   }

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

@@ -0,0 +1,178 @@
+import { fabric } from 'fabric';
+import Component from '@/interface/component';
+import { componentNames } from '@/consts';
+
+/**
+ * FreeDrawing
+ * @class FreeDrawing
+ * @param {Graphics} graphics - Graphics instance
+ * @extends {Component}
+ * @ignore
+ */
+class FreeDrawing extends Component {
+  constructor(graphics) {
+    super(componentNames.FREE_DRAWING, graphics);
+
+    /**
+     * Brush width
+     * @type {number}
+     */
+    this.width = 12;
+
+    /**
+     * fabric.Color instance for brush color
+     * @type {fabric.Color}
+     */
+    this.oColor = new fabric.Color('rgba(0, 0, 0, 0.5)');
+    this._handlers = {
+      mousedown: this._onFabricMouseDown.bind(this),
+      mousemove: this._onFabricMouseMove.bind(this),
+      mouseup: this._onMasikMouseUp.bind(this),
+    };
+
+    /**
+     * imageEditor instance
+     */
+    this.imageEditor = null;
+  }
+
+  /**
+   * Start free drawing mode
+   * @param {{width: ?number, color: ?string}} [setting] - Brush width & color
+   */
+  start(setting) {
+    console.log(setting);
+    if (setting?.mosaic) {
+      this.setMosaic(setting);
+    } else {
+      const canvas = this.getCanvas();
+      console.log(canvas);
+      canvas.isDrawingMode = true;
+      this.setBrush(setting);
+    }
+  }
+
+  /**
+   * Set brush
+   * @param {{width: ?number, color: ?string}} [setting] - Brush width & color
+   */
+  setBrush(setting) {
+    const brush = this.getCanvas().freeDrawingBrush;
+
+    setting = setting || {};
+    this.width = setting.width || this.width;
+    if (setting.color) {
+      this.oColor = new fabric.Color(setting.color);
+    }
+    brush.width = this.width;
+    brush.color = this.oColor.toRgba();
+  }
+
+  /**
+   * End free drawing mode
+   */
+  end() {
+    const canvas = this.getCanvas();
+    canvas.isDrawingMode = false;
+    canvas.selection = true;
+    canvas.off('mouse:down', this._handlers.mousedown);
+  }
+
+
+
+  /**
+   * Set mosaic
+   */
+  setMosaic(setting) {
+    
+    this.imageEditor = setting.imageEditor;
+    this.width = setting.width;
+    const canvas = this.getCanvas();
+    canvas.selection = false;
+    canvas.isDrawingMode = true;
+
+    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;
+    canvas.freeDrawingBrush = texturePatternBrush;
+    canvas.freeDrawingBrush.width=30
+    //canvas.on('mouse:down', this._handlers.mousedown);
+  }
+
+  /**
+   * MouseDown event handler on canvas
+   * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event object
+   * @private
+   */
+  _onFabricMouseDown() {
+    const canvas = this.getCanvas();
+    canvas.on({
+      'mouse:move': this._handlers.mousemove,
+      'mouse:up': this._handlers.mouseup,
+    });
+  }
+
+  /**
+   * MouseDown event handler on canvas
+   * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event object
+   * @private
+   */
+  _onFabricMouseMove(fEvent) {
+    const canvas = this.getCanvas();
+    const blockSize = this.width;
+    const halfSize = this.width / 2;
+    // 直接获取e中的x，y有问题
+    const startPoints = canvas.getPointer(fEvent.e);
+    console.log(startPoints);
+    const startX = startPoints.x - halfSize;
+    console.log(startX);
+    const startY = startPoints.y - halfSize;
+    const ctx = canvas.contextContainer;
+    const imageData = ctx.getImageData(startX, startY, blockSize, blockSize);
+    const { data } = imageData;
+    let r = 0;
+    let g = 0;
+    let b = 0;
+    for (let i = 0; i < data.length; i += 4) {
+      r += data[i];
+      g += data[i + 1];
+      b += data[i + 2];
+    }
+    r = Math.floor(r / (blockSize * blockSize));
+    g = Math.floor(g / (blockSize * blockSize));
+    b = Math.floor(b / (blockSize * blockSize));
+    for (let i = 0; i < data.length; i += 4) {
+      data[i] = r;
+      data[i + 1] = g;
+      data[i + 2] = b;
+      data[i + 3] = 255; // Alpha值
+    }
+    ctx.putImageData(imageData, startX, startY);
+  }
+
+  /**
+   * MouseUp event handler on canvas
+   * @private
+   */
+  async _onMasikMouseUp() {
+    const doms = document.getElementsByClassName('lower-canvas');
+    const [domCanvas] = doms;
+    const dataURL = domCanvas.toDataURL();
+    const response = await fetch(dataURL);
+    const blob = await response.blob();
+    const imgUrl = URL.createObjectURL(blob);
+    //this.imageEditor.invoke('addImageObject', imgUrl);
+   this.imageEditor.addImageObject(imgUrl)
+    console.log(this.imageEditor)
+    const canvas = this.getCanvas();
+    canvas.off({
+      'mouse:move': this._handlers.mousemove,
+      'mouse:up': this._handlers.mouseup,
+    });
+  }
+}
+
+export default FreeDrawing;

package/src/js/component/freeDrawing.js

@@ -41,7 +41,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 +57,10 @@ class FreeDrawing extends Component {
    * @param {{width: ?number, color: ?string}} [setting] - Brush width & color
    */
   setBrush(setting) {
-    const brush = this.getCanvas().freeDrawingBrush;
+    const canvas =  this.getCanvas()
+    let pencilBrush = new fabric.PencilBrush(canvas)
+    canvas.freeDrawingBrush = pencilBrush;
+    const brush = canvas.freeDrawingBrush;
 
     setting = setting || {};
     this.width = setting.width || this.width;
@@ -78,17 +81,81 @@ class FreeDrawing extends Component {
     canvas.off('mouse:down', this._handlers.mousedown);
   }
 
+
+
   /**
    * Set mosaic
    */
   setMosaic(setting) {
-    this.imageEditor = setting.imageEditor;
-    this.width = setting.width;
+    
     const canvas = this.getCanvas();
     canvas.selection = false;
-    canvas.on('mouse:down', this._handlers.mousedown);
+    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)
+
+    var texturePatternBrush = new fabric.PatternBrush(canvas);
+    texturePatternBrush.source = patternCanvas;
+    canvas.freeDrawingBrush = texturePatternBrush;
+    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
@@ -151,7 +218,9 @@ class FreeDrawing extends Component {
     const response = await fetch(dataURL);
     const blob = await response.blob();
     const imgUrl = URL.createObjectURL(blob);
-    this.imageEditor.invoke('addImageObject', imgUrl);
+    //this.imageEditor.invoke('addImageObject', imgUrl);
+   this.imageEditor.addImageObject(imgUrl)
+    console.log(this.imageEditor)
     const canvas = this.getCanvas();
     canvas.off({
       'mouse:move': this._handlers.mousemove,

package/src/js/component/text.js

@@ -488,7 +488,7 @@ class Text extends Component {
    * @private
    */
   _onFabricSelect(fEvent) {
-    console.log('sssssssddddddds')
+    console.log('ssssssss')
     this.isPrevEditing = true;
 
     this.setSelectedInfo(fEvent.target, true);
@@ -525,8 +525,6 @@ class Text extends Component {
     const e = fEvent.e || {};
     const originPointer = this.getCanvas().getPointer(e);
 
-    console.log('_fireAddText')
-
     if (!obj) {
       this.fire(events.ADD_TEXT, {
         originPosition: {

package/src/js/extension/cropzone.js

@@ -112,7 +112,7 @@ const Cropzone = fabric.util.createClass(
       ctx.scale(originalScaleX, originalScaleY);
 
       // Render outer rect
-      this._fillOuterRect(ctx, 'rgba(0, 0, 0, 0.5)');
+      this._fillOuterRect(ctx, 'rgba(0, 0, 0, 0.3)');
 
       if (this.options.lineWidth) {
         this._fillInnerRect(ctx);