fabric.js toDataURL() 图片大小偏差使用 toDataURL 方法将 fabric.js 中的图层导

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

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

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

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

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

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

版权声明：本文为博主「佳佳」的原创文章，遵循 CC 4.0 BY-NC-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：www.liujiajia.me/2023/9/27/f…

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

Footnotes