Question

我使用的是fabricjs 1.7.17，并且已经在IE Edge，Chrome和Firefox上看到过这个问题。

其中画布的宽度和高度设置为HTML为768px。

在我的fabricjs canvas init中，我得到了：

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/

点击＆＃34; Native Canvas.toDataURL（）＆＃34;并且您将结果发送到console.log，并且预览窗口中显示的画布不会有任何更改。

点击＆＃34; Fabricjs canvas.toDataURL（）＆＃34;而且你也会得到console.log的结果（相同）;你也会在预览窗口中跳过这个大小...这就是我试图阻止的。

Answer 1

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

如果导出到数据网址有一个乘数，Dataurl会在进程修复后重置画布。

虽然至少在非乘法情况下可以修复，但需要正确修复。

正确的修复包括仅在导出期间设置backstore，以便不会触及css。

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

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

fabricjs调用canvas.toDataURL（）调整画布的尺寸

1 个答案: