通過畫布獲取現有base64圖像的像素顏色

在HTML文檔中獲取圖像。源是一個base64字符串。我想檢索點擊的像素的顏色。使用內存畫布，我得到的是零。通過畫布獲取現有base64圖像的像素顏色

function getColor(imagecontainer,top,left){ 
    var image = new Image(); 
    image.onload = function() { 
     var canvas = document.createElement('canvas'); 
     var context = canvas.getContext('2d'); 
     context.drawImage(image, 0, 0); 
     var myData = context.getImageData(Math.round(left)-2, Math.round(top)-2, 4, 4).data; 
     console.log(myData, left, top); 
    }; 
    image.src = imagecontainer.find("img").attr("src"); 
}

關於同樣的問題還有很多其他問題，但是沒有一個解決方案可以爲我解決這個問題。 MyData總是包含零。

來源

2015-06-18 dboth

你想獲得1或16（像這裏）像素？ – K3N

是的，這有點令人困惑的閱讀，我後來內插16像素.. – dboth

更新基於新的信息：

原因可能僅僅是主圖像（imagecontainer.find（「IMG」））是不是在它的引用時加載。

如果此圖像中存在DOM可以使用windows.onload運行腳本：

window.onload = function() { 
    // code that uses the image 
};

，因爲這將只能運行時，一切都已經加載含。圖像數據。有選擇地將內聯onload處理程序添加到image標記（不推薦），或者通過JavaScript添加src並監視onload事件。

另一個可能的原因是，如果這是IE和圖像在緩存中，onload可能不會觸發。您可以查看圖像的complete屬性來檢查這一點：

var image = new Image(); 
image.onload = onloadHandler; 
image.src = imagecontainer.find("img").attr("src"); 
if (image.complete) onloadHandler(); 

function onloadHandler() { 
    var canvas = document.createElement('canvas'); 
    var context = canvas.getContext('2d'); 
    context.drawImage(image, 0, 0); 
    var myData = context.getImageData(Math.round(left)-2, Math.round(top)-2, 4, 4).data; 
};

雖然可以與原始圖像直接使用，而不具有相同的URL加載另一個。

來源

2015-06-18 16:38:34 K3N

感謝您的答覆，我留下了所有錯誤檢查，以保持代碼更易於閱讀。如果圖像已經加載，onload永遠不會觸發我猜。所以如果我使用圖像本身，我不需要onload。那麼，但是我總是得到一個零數組。 – dboth

@dboth在控制檯中是否有任何錯誤？ – K3N

@dboth我懷疑主圖像甚至沒有加載..你的腳本運行在windows.onload上嗎？ – K3N

通過畫布獲取現有base64圖像的像素顏色

回答

相關問題