畫布到數據網址無法正常工作

我有一個函數，它需要一個img元素並返回一個數據url。這工作像7/10次，並返回一個空白圖像3/10次。我通過瀏覽器（chrome）查看創建的數據url並使用相同的圖像，所以我知道這個函數返回的是破碎的圖像。任何人都可以發現原因畫布到數據網址無法正常工作

function imgToDataURL(img) { 
    var canvas = document.createElement('canvas'); 
    canvas.width = img.naturalWidth; 
    canvas.height = img.naturalHeight; 
    var c = canvas.getContext('2d'); 
    c.drawImage(img, 0, 0); 
    dataurl = canvas.toDataURL(); 
    return dataurl; 
} 

$(function() { 
    img = new Image(); 
    img.crossOrigin = ''; 
    img.onload = function() { 
     newimg = new Image(); 
     newimg.onload = function() { 
      document.body.appendChild(newimg); 
     } 
     newimg.src = imgToDataURL(img); 
    } 
    img.src = 'https://somedomain.s3.amazonaws.com/someimg.png'; 
});

這個例子大部分時間都在工作，但有時候會以一個大的白色矩形而不是圖像結束。

來源

2013-09-16 user2073343

注意，出於安全考慮，帆布源圖像必須在同一個域做爲所服務在頁面主辦。因此，如果您的img.src是其他域，並且您將其他域的圖像寫入canvas，那麼canvas.toDataURL將失敗。 – markE

我已經設置好了，所以我可以使用CORS從有問題的域讀取圖像。 – user2073343

只是好奇......你爲什麼要通過畫布運行IMG？難道你不能只用.src創建一個html img元素='https：//somedomain.s3.amazonaws.com/someimg.png' – markE

你必須等待圖像加載之前加載使用.drawImage函數。只有在瀏覽器加載圖像後，才能調用imgToDataURL函數。

事情是這樣的：

var image_sources = ["img1.png", "img2.png", "..."]; 

for(var i=0; i<image_sources.length; i++) { 
    var new_img = document.createElement("img"); 
    new_img.onload = function() { 
     imgToDataURL(this); 
    }; 
    new_img.src = image_sources[i]; 
}

來源

2013-09-16 14:14:42 letiagoalves

我希望這是問題，但我已經這樣做了。imgToDataURL總是調用加載的圖像。 – user2073343

@ user2073343你可以讓一個jsfiddle展示問題嗎？在這種情況下，您發佈的代碼 – letiagoalves

@ user2073343沒有任何問題，您是否可以提供您的問題的實際工作示例？以上顯然是不完整的，因爲我們沒有看到何時/如何調用imgToDataUrl。 – Matt

畫布到數據網址無法正常工作

回答

相關問題