在屏幕畫布上繪製的圖像像素顏色取樣問題

我需要從圖像中對像素顏色進行取樣，但看起來好像我無法做到。我加載圖像並將其繪製到屏幕外，然後嘗試對像素顏色進行採樣，但我總是得到0值。在屏幕畫布上繪製的圖像像素顏色取樣問題

我的代碼：

// Create canvas and set context 
var canvas = document.createElement('canvas'); 
canvas.width = 8; 
canvas.width = 8; 
var context = canvas.getContext('2d'); 

// Setup image 
var image = new Image(); 
image.src = 'img.png'; 
image.onload = function(){ 
    context.drawImage(image, 0, 0); 
} 

// Sample a random pixel from the canvas 
var x = Math.floor(Math.random()*8); 
var y = Math.floor(Math.random()*8); 
var pixelInfo = context.getImageData(x,y,1,1); 
var rgbaVal = pixelInfo.data; 
alert('Image: '+image.src+'\n\nR: '+rgbaVal[0]+'\nG: '+rgbaVal[1]+'\nB: '+rgbaVal[2]+'\nA: '+rgbaVal[3]+'\n\nCoords: '+x+', '+y);

我沒有錯誤，如果我試着畫出一個屏幕上的畫布上的圖像時，圖像正確繪製。我無法找到問題

來源

2011-09-13 Markus Kothe

因爲圖像尚未加載和繪製。你在onload被觸發後繪製它，那麼你也應該得到RGB值。

image.onload函數稍後會觸發您的採樣函數，因此您現在只需對空畫布進行採樣。

來源

2011-09-13 08:43:00 TJHeuvel

但是即使我刪除.onload，只是繪製圖像（context.drawImage（圖像，0，0）;）在畫布上我仍然得到同樣的結果。有些東西告訴我，我沒有真正以正確的方式將圖像繪製到畫布上？ –

不要刪除onload，而是在onload中獲取像素顏色。 – TJHeuvel

那麼，這項工作，但只有當沒有運行代碼本地。是否有任何解決方法（這不涉及在啓動時設置瀏覽器參數等）？ –

<canvas id="canvas1" width="200", height="200" style="background:red;">Random Canvas</canvas> 
<script> 

    var canvas = document.getElementById("canvas1"); 
    //canvas.width = 200; 
    //canvas.width = 200; 
    var context = canvas.getContext('2d'); 

    // Setup image 
    var image = new Image(); 
    image.src = "img/image.jpg"; 

    image.onload = function() 
    { 

     context.drawImage(image, 0, 0); 

     var x = Math.floor(Math.random()*200); 
     var y = Math.floor(Math.random()*200); 
     var pixelInfo = context.getImageData(x,y,1,1); 
     var rgbaVal = pixelInfo.data; 

     alert('Image: '+image.src+'\n\nR: '+rgbaVal[0]+'\nG: '+rgbaVal[1]+'\nB: '+rgbaVal[2]+'\nA: '+rgbaVal[3]+'\n\nCoords: '+x+', '+y); 

    } 

    // Sample a random pixel from the canvas 

</script>

來源

2012-12-21 11:23:39

在屏幕畫布上繪製的圖像像素顏色取樣問題

回答

相關問題