Javascript 从画布中的图像读取RGB_Javascript_Css_Html_Image_Canvas

Javascript 从画布中的图像读取RGB

javascript css html image canvas

Javascript 从画布中的图像读取RGB,javascript,css,html,image,canvas,Javascript,Css,Html,Image,Canvas,我正在尝试从画布中的图像读取RGB 我创建画布及其上下文我将读取img.width和img.height，并在画布上设置相同的尺寸在画布中绘制图像使用getImageData读取imagedata 当我看到图像的所有像素的RGB值为红色=0、绿色=0、蓝色=0时 <html> <head> <title></title> <script type="text/javascript">

我正在尝试从画布中的图像读取RGB

我创建画布及其上下文我将读取img.width和img.height，并在画布上设置相同的尺寸在画布中绘制图像使用getImageData读取imagedata 当我看到图像的所有像素的RGB值为红色=0、绿色=0、蓝色=0时

     <html>
     <head>
     <title></title>
     <script type="text/javascript">
     function myfun() {
    var img = document.getElementById('myImg');

    var width = img.clientWidth;
    var height = img.clientHeight;


    var _grayCanvas = document.getElementById('grayCanvas');
    var grayctx = _grayCanvas.getContext("2d");

    grayctx.canvas.width = width;
    grayctx.canvas.height = height;


    var grayimg = new Image();
    grayimg.src = "img.bmp";



    grayimg.onload = function () {
        grayctx.drawImage(grayimg, 0, 0);
    }



    var x = 0;
    var y = 0;
    var canvasColor = grayctx.getImageData(x, y, width, hieght);

    var red = canvasColor.data[0];
    var green = canvasColor.data[1];
    var blue = canvasColor.data[2];
    var alpha = canvasColor.data[3];

    alert(red + " : " + green + " : " + blue + " : " + alpha);


    for (var i = 0; i < canvasColor.data.length ; i += 4) {
        var red = canvasColor[i];
        var green = canvasColor[i + 1];
        var blue = canvasColor[i + 2];
        var alpha = canvasColor[i + 3];
        if(red > 0)
        alert(red + " : " + green + " : " + blue + " : " + alpha);
    }

}

上述代码可能存在什么问题？

提前感谢。

请参阅canvasColor.length应为canvasColor.data.length。它将仅为4，因为您刚刚要求1像素。因此，您的for循环也是胡说八道！也就是说，您只能从[0..3]进行索引，但您尝试从[0..6]I=0+3到I=3+3进行索引。但是您是否看到画布上的图像？以下是读取图像上所有像素的代码示例：