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（）調整畫布的尺寸

回答

相關問題