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

Question

使用 Fabric.js 克隆图像时，克隆图像和原始图像的大小会有所不同。

代码如下。 您可以通过按“运行代码 sn-p”来检查动作。 上传图片后点击画布进行克隆。 再次单击以使克隆图像消失。 重复点击可以轻松检查图像大小错误。

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() 方法默认将数字属性（比例、位置、角度等）四舍五入到小数点后两位。这是由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