在屏幕画布上绘制的图像像素颜色取样问题

我需要从图像中对像素颜色进行取样，但看起来好像我无法做到。我加载图像并将其绘制到屏幕外，然后尝试对像素颜色进行采样，但我总是得到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

在屏幕画布上绘制的图像像素颜色取样问题

回答

相关问题