fabricjs 调用 canvas.toDataURL() 调整画布的尺寸

Question

我正在使用fabricjs 1.7.17，并且在IE Edge、Chrome和Firefox上看到了这个问题。

在 HTML 中设置画布的宽度和高度为 768 像素。

在我的 fabricjs 画布初始化中，我有：

editor.canvas = new fabric.Canvas('editor')
editor.canvas.setDimensions({
  width: 1080,
  height: 1080,
  allowTouchScrolling: false,
  backgroundColor: 'rgba(55, 55, 55, .33)',
  rotationCursor: 'url(/static/img/rotate.cur) 10 10, crosshair'
}, {backstoreOnly: true})

问题是当您调用 editor.canvas.toDataURL() 方法时，大小从 768px 变为 1080px

如果您调用浏览器的原生 canvas.toDataURL() 方法，大小不会发生跳跃。

有人碰到这个并有可能的解决办法吗？

这是一个简化的 jsfiddle： https://jsfiddle.net/m8dhmbtu/23/

点击“Native Canvas.toDataURL()”，你会得到结果到console.log，预览窗口中显示的画布不会有任何变化。

点击“Fabricjs canvas.toDataURL()”，你也会得到console.log的结果（相同）；您还会在预览窗口的大小上得到一个跳跃……这就是我想要阻止的。

Answer 1

我认为问题实际上是一个错误。 您将画布设置为 1080 仅用于 backstore 尺寸，这意味着画布将被调整大小但 css 将保持不变。

如果导出到数据 url 有乘数，则数据 URL 将在处理后重置画布以修复它。

虽然这至少可以在非倍增的情况下修复，但需要适当的修复。

正确的解决方法是仅在导出期间设置后台存储，以便不会触及 css。

一个更好的解决方法是不要触摸原始画布并动态创建一个仅用于导出。

请访问官方 fabricjs 存储库并为此打开一个问题。