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

我正在使用fabricjs 1.7.17，并且在IE Edge，Chrome和Firefox上看到此问题。fabricjs调用canvas.toDataURL（）调整画布的尺寸

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

在我的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/

单击“本地Canvas.toDataURL（）”，你会得到的结果CONSOLE.LOG会有在预览中显示的画布上没有变化窗口。

点击“Fabricjs canvas.toDataURL（）”，你也会得到与console.log相同的结果;你还可以在预览窗口中获得大小的跳跃......这就是我想要阻止的。

来源

2017-08-27 JoeManFoo

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

dataurl会在该过程结束后重置画布，以便在导出到数据url时具有倍数。

虽然这至少可以解决非乘法情况，但需要适当的修复。

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

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

请登录官方的fabricjs仓库，并为此打开一个问题。

来源

2017-08-27 20:37:41 AndreaBogazzi

谢谢@andreabogazzi - 我创建了一张票：https：//github.com/kangax/fabric.js/issues/4252 – JoeManFoo

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

回答

相关问题