ding-image-editor 3.15.3 → 3.15.4

package/package.json

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

package/src/js/component/freeDrawing.js

@@ -27,8 +27,13 @@ class FreeDrawing extends Component {
     this._handlers = {
       mousedown: this._onFabricMouseDown.bind(this),
       mousemove: this._onFabricMouseMove.bind(this),
-      mouseup: this._onFabricMouseUp.bind(this),
+      mouseup: this._onMasikMouseUp.bind(this),
     };
+
+    /**
+     * imageEditor instance
+     */
+    this.imageEditor = null;
   }
 
   /**
@@ -37,10 +42,11 @@ class FreeDrawing extends Component {
    */
   start(setting) {
     console.log(setting);
-    if (setting?.masik) {
-      this.startMasik();
+    if (setting?.mosaic) {
+      this.setMosaic(setting);
     } else {
       const canvas = this.getCanvas();
+      console.log(canvas);
       canvas.isDrawingMode = true;
       this.setBrush(setting);
     }
@@ -73,9 +79,11 @@ class FreeDrawing extends Component {
   }
 
   /**
-   * Set masik
+   * Set mosaic
    */
-  startMasik() {
+  setMosaic(setting) {
+    this.imageEditor = setting.imageEditor;
+    this.width = setting.width;
     const canvas = this.getCanvas();
     canvas.selection = false;
     canvas.on('mouse:down', this._handlers.mousedown);
@@ -101,11 +109,15 @@ class FreeDrawing extends Component {
    */
   _onFabricMouseMove(fEvent) {
     const canvas = this.getCanvas();
-    const blockSize = 20;
+    const blockSize = this.width;
+    const halfSize = this.width / 2;
+    // 直接获取e中的x，y有问题
     const startPoints = canvas.getPointer(fEvent.e);
-    const startX = startPoints.x;
-    const startY = startPoints.y;
-    const ctx = canvas.getContext('2d');
+    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;
@@ -132,7 +144,14 @@ class FreeDrawing extends Component {
    * MouseUp event handler on canvas
    * @private
    */
-  _onFabricMouseUp() {
+  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);
     const canvas = this.getCanvas();
     canvas.off({
       'mouse:move': this._handlers.mousemove,

package/src/js/imageEditor.js

@@ -734,6 +734,13 @@ class ImageEditor {
     }
   }
 
+  /**
+   * get canvas image center
+   */
+  getCenterPoint() {
+    return this._graphics.canvasImage.getCenterPoint();
+  }
+
   /**
    * Load image from file
    * @param {File} imgFile - Image file