canvas 中的对象未以相同大小加载 - fabric.js loadFromJSON

Question

https://jsfiddle.net/Wadsack/ovcx1rtj/38

var canvas = new fabric.Canvas('canvas_1');
var canvas2 = new fabric.Canvas('canvas_2');

var imgObj = new Image();
imgObj.src = "https://gtaprinting.ca/wp-content/uploads/2021/05/blank-t-shirt-front-grey.png";
imgObj.onload = () => {
  var image = new fabric.Image(imgObj);
  image.set({
    left: canvas.getWidth()/2,
    top: canvas.getHeight()/2,
    originX: 'center',
    originY: 'center',
    centeredScaling: true,
  }).scaleToWidth(canvas.getWidth()/2);
  canvas.add(image);
  canvas.renderAll();
  canvas2.loadFromJSON(JSON.stringify(canvas));
    canvas2.renderAll();
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.2.0/fabric.min.js"></script>
<canvas id="canvas_1"></canvas>
<canvas id="canvas_2"></canvas>

创建 2 个重复项 canvas 并使用 toJSON 导出第一个 canvas 并使用 loadFromJSON 填充第二个 canvas 时，会生成第二个 canvas 中的对象] 比第一个小。

我正在使用 fabricjs 4.2.0

有谁知道为什么会这样或解决问题的方法吗？我已经尝试了所有方法，但在将 png 和 jpeg 文件合并到同一个 canvas 时，情况变得更糟，它们的大小都相差了不同的数量。即 png 小 10%，jpeg 小 10%

互联网你是我唯一的希望

Answer 1

http://fabricjs.com/fabric-gotchas

Wrong position after reloading a JSON object - NUM_FRACTION_DIGITS

Fabric can serialize and deserialize objects in a plain object format. When dealing with serialization, floats can be a problem and give long strings with an unnecessary quantity of decimals. This blows up the string size. To reduce that, there is a constant defined on the Object called NUM_FRACTION_DIGITS, historically set to 2. That means that a top value of 3.454534413123 is saved as 3.45, same for scale, width, height. This is mostly fine unless you are dealing without situation where precision matter. To make an example, a very large image, can be scaled down to a small size using a scale of 0.0151. In this case a serialization would save it as 0.02 changing meaningully the scale. If you are facing such situations, in your project set the constant higher: fabric.Object.NUM_FRACTION_DIGITS = 8 to have 8 decimals on properties. This affects SVG export too.

你的图片超过4000px大，你属于这个问题

更正 fiddle 将“小数位数”设置为 8：https://jsfiddle.net/xrfa5dzc/

canvas 中的对象未以相同大小加载 - fabric.js loadFromJSON

objects in canvas aren't loading with the same size - fabric.js loadFromJSON

javascript

json

canvas

fabricjs