fabric.js - toDataURL在畫布上顯示空白頁面時顯示空白頁面

對於我的畫布應用程序，我正在使用fabric.js，除了在畫布上存在圖像時，toDataURL方法正常工作。當我將圖像添加到畫布並調用toDataURL時，它會顯示一個空白頁面。fabric.js - toDataURL在畫布上顯示空白頁面時顯示空白頁面

//When i call it from chrome console 
canvas.toDataURL(); 
//It returns a working data url with no problem. 
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPAAAAGkCAYAAAAPPajHAAAgAElEQ…fpmwgogX1TrjoqP0FACewngtZh+iYCSmDflKuOyk8Q+H+CKCqUW0spTgAAAABJRU5ErkJggg==" 

//When i execute same code in a .js file it returns a data url which shows a blank image. 
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPAAAAGkCAYAAAAPPajHAAAKC0lEQ…sBAmEBAw6XJzoBA/YDBMICBhwuT3QCBuwHCIQFDDhcnugEHt/IAaW9dzALAAAAAElFTkSuQmCC"

有趣的是，它的工作Chrome瀏覽器開發控制檯上而不是在作品名爲.js文件，即使是相同的代碼。我注意到，工作數據URL完成'=='，但其他人沒有。但我不知道這是什麼意思。

來源

2013-10-13 Yusuf Can Gürkan

你沒有太多的分析，但我會從我的直覺去那裏。

您正在使用的圖像可能違反了Cross-Origin Resource Sharing（CORS）的要求。發生這種情況時，當您嘗試使用canvas.toDataURL()或context.getImageData()獲取像素數據時，畫布會返回空白圖像。

它基本上發生在圖像不在與頁面相同的域上或從file：//協議加載時發生。

你可以嘗試設置源之前添加下面的圖像對象：

image.crossOrigin = 'anonymous'; 
image.src = '...';

從標籤：

<img crossOrigin='anonymous' src='...' alt='' />

這將請求許可服務器使用的圖像交叉起源。如果服務器允許你應該沒問題。

如果沒有，您將不得不將圖像複製到您自己的服務器，以便從與您網頁相同的域加載，或創建代理頁面，從外部加載圖像並從代理頁面將其提供給您的頁面這聽起來很複雜，但實際上並非如此）。

如果圖像根本沒有顯示在畫布上，您可能沒有使用加載回調，您需要加載回調，因爲圖像加載是異步的。如果是這樣，只需添加：

image.onload = function() { 
    /// now you can draw the image to canvas 
} 
image.crossOrigin = 'anonymous'; 
image.src = '...';

來源

2013-10-13 07:09:58 K3N

問題解決了。我錯過的一點是，我在加載canvas之前調用了toDataURL函數，這就是爲什麼它向我展示一個空白頁面。

canvas.loadFromJSON(json,function(){ 
      var dataURL = canvas.toDataURL(); 
      });

這解決了我的問題，當我給toDataURL（）函數作爲loadFromJSON函數的回調。

但過了一段時間，我有一個關於CORS的不同的問題，當我試圖從s3桶上傳我的圖像時，我解決了這個問題，因爲它解決了上行問題。

來源

2013-10-16 10:01:13

有道理，這也解決了我的問題。很高興我看到你的答案，然後用S3將我的頭髮拉出CORS的東西！ – teewuane

fabric.js - toDataURL在畫布上顯示空白頁面時顯示空白頁面

回答

相關問題