Fabric.js toDataURL() 图片大小偏差

使用 toDataURL ^[1] 方法将 fabric.js 中的图层导出为图片，发现比实际的大小大了 1 ~ 2 个像素。

为了避免图片过大，所有对图片进行了 scale() 。估计是因为缩放后的图片宽高不是整数，最后导出的图片的宽高和实际计算的略有偏差。比如本来计算的宽高分别是 602.3904383765718 和 900 ，结果导出的图片宽高是 604 和 901 。

fabric.js 的 toDataURL 方法其实最终调用的还是 HTMLCanvasElement 的同名方法 ^[2] ，所以也不确定是哪边的原因。

好在 fabric.js 的方法提供了额外的参数，可以通过指定 width 和 height 的方式来控制导出图片的宽高，示例如下：

javascript

const dataurl = item.toDataURL({
  format: 'png',
  quality: 1,
  width: Math.floor(item.width * scale),
  height: Math.floor(item.height * scale),
});

需要注意的是：这种方式多余的区域是被裁剪掉的。

Fabric.js toDataURL() 图片大小偏差 ​

Fabric.js toDataURL() 图片大小偏差