FabricJS 裁剪扩展功能

Posted 2023-03-25

【中文标题】FabricJS 裁剪扩展功能

【英文标题】：FabricJS Crop extended functionality

【发布时间】：2021-12-26 02:00:36

【问题描述】：

找到了这种裁剪的实现 https://editphotosforfree.com/photoapps/online-photo-editor-and-collage-maker 这正是我想要使用的。但是看起来互联网上没有复制此功能的示例。堆栈溢出和谷歌搜索中的其他裁剪技术具有此实现的一些原则，但不是全部。 任何想法如何实现这一目标？

更新1： 通过一些调试，我可以传输代码。但它并不完美。角落离开边界，如果您旋转图像，它将不起作用。也许有人可以在此基础上“构建”。

document.getElementById("crop").onclick = function () 
  var e = canvas.getActiveObject();
  if (e && e.get("type") == "image") 
    var i = new fabric.Rect(
        id: "crop-rect",
        top: e.top,
        left: e.left,
        width: e.getScaledWidth(),
        height: e.getScaledHeight(),
        stroke: "rgb(42, 67, 101)",
        strokeWidth: 2,
        strokeDashArray: [5, 5],
        fill: "rgba(255, 255, 255, 1)",
        globalCompositeOperation: "overlay",
      ),
      a = new fabric.Rect(
        id: "overlay-rect",
        top: e.top,
        left: e.left,
        width: e.getScaledWidth(),
        height: e.getScaledHeight(),
        selectable: !1,
        selection: !1,
        fill: "rgba(0, 0, 0, 0.5)",
      );
    if ((i.setControlVisible("mtr", !1), e.cropX)) 
      var s = e.cropX,
        o = e.cropY,
        c = e.width,
        l = e.height;
      e.set(
        cropX: null,
        cropY: null,
        left: e.left - s * e.scaleX,
        top: e.top - o * e.scaleY,
        width: e._originalElement.naturalWidth,
        height: e._originalElement.naturalHeight,
      ),
        (e.dirty = !0),
        i.set(
          left: e.left + s * e.scaleX,
          top: e.top + o * e.scaleY,
          width: c * e.scaleX,
          height: l * e.scaleY,
        ),
        (i.dirty = !0),
        a.set(
          left: e.left,
          top: e.top,
          width: e.width * e.scaleX,
          height: e.height * e.scaleY,
        ),
        (a.dirty = !0);
    
    canvas.add(a),
      canvas.add(i),
      canvas.discardActiveObject(),
      canvas.setActiveObject(i),
      canvas.renderAll(),
      i.on("moving", function () 
        (i.top < e.top || i.left < e.left) &&
          ((i.left = i.left < e.left ? e.left : i.left),
          (i.top = i.top < e.top ? e.top : i.top)),
          (i.top + i.getScaledHeight() > e.top + e.getScaledHeight() ||
            i.left + i.getScaledWidth() > e.left + e.getScaledWidth()) &&
            ((i.top =
              i.top + i.getScaledHeight() > e.top + e.getScaledHeight()
                ? e.top + e.getScaledHeight() - i.getScaledHeight()
                : i.top),
            (i.left =
              i.left + i.getScaledWidth() > e.left + e.getScaledWidth()
                ? e.left + e.getScaledWidth() - i.getScaledWidth()
                : i.left));
      ),
      i.on("deselected", function () 
        h();
      );
  

  function h(r, n) 
    var s = (i.left - e.left) / e.scaleX,
      o = (i.top - e.top) / e.scaleY,
      c = (i.width * i.scaleX) / e.scaleX,
      l = (i.height * i.scaleY) / e.scaleY;
    e.set("cropX", s),
      e.set("cropY", o),
      e.set("width", c),
      e.set("height", l),
      canvas.remove(i),
      canvas.remove(a),
      e.set(
        top: e.top + o * e.scaleY,
        left: e.left + s * e.scaleX,
      );
  
;

【参考方案1】：

这绝对不是一回事，唯一的方法是举个例子，你能够找到并修改它，或者从头开始，这很可悲，但这是真的。诀窍是设置正确的cropX ,cropY,height,width 到图像，根据偏移量到背景图像，这是初始图像的克隆