Fabric.js toDataURL() 图片大小偏差
🏷️ Fabric.js
使用 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),
});
1
2
3
4
5
6
2
3
4
5
6
需要注意的是:这种方式多余的区域是被裁剪掉的。