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

Question

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

代码写在下面。您可以通过按“运行代码片段”来查看动向。上传图片后点击 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>

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

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

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

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

Images Cloned on Fabric.js Have Sizes Inconsistent With Original Image Size

html

javascript

css

canvas

fabricjs