javascript - 在 Fabric.js 上克隆的图像大小与原始图像大小不一致

Question

使用Fabric.js克隆图片时，克隆图片和原始图片的大小会不一样。

代码写在下面。您可以通过按“运行代码片段”来检查 Action 。上传图像后单击 Canvas 以克隆它。再次单击使克隆图像消失。重复点击可以很容易地检查图像尺寸错误。

const canvas = new fabric.Canvas("c");

$("input").on("change", e => {
    canvas.clear();
    const fr = new FileReader(e);
    fr.onload = (e) => {
        input(e.target.result);
    };
    fr.readAsDataURL(e.target.files[0]);
});

const input = url => {
    fabric.Image.fromURL(url, oImg => {
        canvas.setWidth($("html").width());
        const resizeScale = canvas.width / oImg.width;
        oImg.scale(resizeScale);
        canvas.setHeight(oImg.height * resizeScale);
        canvas.add(oImg).renderAll();
        canvas.selection = oImg.selectable = false;
    });
};

$("canvas").mousedown(() => {
    const obj = canvas.getObjects();
    if (obj.length === 1) {
        const oImg = obj[0];
        oImg.clone(copy => {
            canvas.add(copy).renderAll();
        });
    };
    if (obj.length === 2) {
        const cloneImg = obj[1];
        canvas.remove(cloneImg);
    };
});

html {
  max-width: 1080px;
  width: 100%;
  margin: auto;
  text-align: center;
}

canvas{
  border: 1px solid black;
}

.canvas-container {
  margin: auto;
}

<input type="file" accept="image/*">
<canvas id="c"></canvas>

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.3.2/fabric.min.js"></script>

我想知道如何使克隆图像的大小与原始图像匹配。

另外，原图尺寸越大，出现的错误也就越多。我在链接中准备了一张测试图片，欢迎下载使用。

smallImg

bigImg

Answer 1

默认情况下，

clone() 和 toObject() 方法将数字属性(比例、位置、 Angular 等)四舍五入到 2 位小数。这是由 fabric.Object.NUM_FRACTION_DIGITS 决定的.

因此，原始图像的 scaleX 可能为 1.857421875，而克隆图像最终为 1.86，因此差异结果大小。

有几种方法可以解决这个问题:

1) 每次克隆后重新设置比例，例如

oImg.clone(copy => {
    copy.set({
      scaleX: oImg.scaleX,
      scaleY: oImg.scaleY,
    });
    canvas.add(copy).renderAll();
});

2) 更改默认精度

fabric.Object.NUM_FRACTION_DIGITS = 5