使用Canvas为图像着色。在IE中工作,但不是Chrome

时间:2016-06-08 14:52:22

标签: javascript html google-chrome canvas

function tintshift(ImgElement)
{
    var canvas = document.createElement("canvas");
    canvas.width = ImgElement.width;
    canvas.height = ImgElement.height;

    var ctx = canvas.getContext("2d");
    ctx.drawImage(ImgElement,0,0);

    var im = ctx.getImageData(0,0,2600,1600);
    var data = im.data;

    for(var i = 0, len = data.length; i < len; i+=4)
    {
        data[i] = 255;
        data[i+1] = 0;
        data[i+2] = 0;
    }

    ctx.putImageData(im,0,0);

    ImgElement.src = canvas.toDataURL();
}

此代码用于获取图像数据并将色调转换为其他颜色,然后使用新着色的版本替换图像。它在Internet Explorer中工作正常,但在chrome中它挂起了“getImageData”方法。我测试了一些警报调用,并且在该方法之后没有任何操作。

稍微有点这个例子http://jsfiddle.net/pHwmL/1/

1 个答案:

答案 0 :(得分:0)

context.getImageData() on localhost?

意识到这是Chrome的安全问题,并且我的本地计算机上有图像。使用Apache服务页面。