setBackground Fabric.js：CORS問題

我正在使用Fabric.js，但我遇到了一個我無法理解的問題。setBackground Fabric.js：CORS問題

我想設置一個Fabric.js畫布的背景，但我得到CORS問題。我已閱讀有關如何使用CORS

var canvas = window._canvas = new fabric.Canvas('presenterCanvas'); 
canvas.isDrawingMode = true; 

src = "http://itknowledgeexchange.techtarget.com/overheard/files/2016/12/water-molecule.png"; 

canvas.setBackgroundImage(src, canvas.renderAll.bind(canvas), { 
    crossOrigin: 'anonymous', 
    width: canvas.width, 
    height: canvas.height, 
    originX: 'left', 
    originY: 'top' 
});

設置背景和我得到這個錯誤：

您可以檢查的jsfiddle代碼：http://jsfiddle.net/wikett/uvk8xsjf/

我不明白爲什麼我不能在html中使用該圖像，並且可以將布料圖像添加到畫布中，但我無法設置背景。任何人都可以幫助解決這個問題嗎？

預先感謝

來源

2017-03-01 Enrique Aparicio

'，我得到這個錯誤：' - 一個空白頁？ **編輯** - 在那裏，有點奇怪....無論如何，CORS限制人們使用他們不希望你使用的其他人的資源......顯示圖像是一回事，在畫布中使用它是另一種，我猜 –

你的問題是你要求結構加載與crossOrigin屬性的圖像。

當您設置媒體元素的crossOrigin屬性時，必須正確設置服務器才能接受此類請求。否則，就像你的情況一樣。

如果您不想稍後導出它，或者應用一些結構的過濾器，則不需要這樣做。

canvas.setBackgroundImage(src, canvas.renderAll.bind(canvas), { 
// crossOrigin: 'anonymous',// Here is your problem 
    width: canvas.width, 
    height: canvas.height, 
    originX: 'left', 
    originY: 'top' 
});

updated fiddle

來源

2017-03-01 13:20:04 Kaiido

謝謝@Kaiido，但現在如果我嘗試使用canvas.toDataURL（）將畫布導出到png，我得到這個錯誤：未捕獲的DOMException：未能在'HTMLCanvasElement'上執行'toDataURL'：受污染的畫布可能無法導出。你可以在這裏查詢：http://jsfiddle.net/wikett/uvk8xsjf/5/ 你知道我該如何解決它嗎？謝謝 –

@EnriqueAparicio，是的，這就是我的意思*如果你不想稍後導出*。如果你真的想要，那麼你必須正確設置託管你的圖像的服務器，以便在你執行crossOrigin請求時使用[Allow-Control-Allow-Request：*]標題，或者使用[代理服務器]（http ：//crossorigin.me/）正確設置，兩種解決方案都使用「crossOrigin：'anonymous'」選項，或將圖像託管在您自己的域中。 – Kaiido

上有顯示圖像沒有限制，但也有使用JavaScript訪問數據（包括像素值）的限制。

Fabric的背景圖像代碼讀取像素數據（大概是這樣它可以進行縮放等操作），所以如果圖像來自另一個原點，則需要通過CORS獲得權限。

來源

2017-03-01 11:06:26 Quentin

setBackground Fabric.js：CORS問題

回答

相關問題