Question

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

我创建了一个画布及其上下文
我会阅读img.width和img.height＆amp;为画布设置相同的尺寸
在画布上绘制图像
使用getImageData（）

当我看到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);
    }

}

上述代码可能存在什么问题？提前谢谢。

从画布中的图像中读取RGB

0 个答案: