canvas 改变图片颜色

 <!DOCTYPE html>
<!--    to moving elements in a straight line   -->
    <html>
        <head>
            <meta charset='utf-8'/>
            <script type="text/javascript"> 
                
                
                window.addEventListener('load',canvasApp, false);
                
                function canvasApp(args) {
                    var canvas = document.getElementById("MyCanvas");
                    var context = canvas.getContext("2d");
                    
                    var logoL = new Image();
                        logoL.src= "../img/csrLeft.png";
                    var widthL = 88;
                    var logoR = new Image();
                        logoR.src = "../img/csrRight.png";
                    var widthR = 286;
                    var height = 31;
                    context.drawImage(logoL,0,0);
                    
                    var dataL = context.getImageData(0,0,widthL,height);
                    
                    for (var i=0; i<dataL.data.length; i+=4 ) {
                        
                        dataL.data[i] = 29;
                        dataL.data[i+1] = 58;
                        dataL.data[i+2] = 87;
                        
                    }
                    context.putImageData(dataL,0,0);
                    
                }
            </script>
    </head>
    <body>
        <div style="position: absolute; top: 50px; left: 50px; ">
            <canvas id="MyCanvas" width="500" height="500">
                Your brower doesn't support canvas
            </canvas>
        </div> 
    </body>
</html> firebug提示var dataL = context.getImageData(0,0,widthL,height);这行代码不安全 颜色也没有改变~ 不知道为什么？？？？Canvas

解决方案 »

  1.   

     因为本地测试用的图片是文件夹内的，也有可能是一个url，js跨域限制是不能获取非同一域名下的数据的，而本地的位置是没有域名的，url是非同一域名的，所以浏览器都认为你是跨域了，才会报错。
        如果一定要测试这个代码，解决办法也容易，我是直接把文件放到了apache根目录或者iis中，然后localhost访问就OK了。。 
      

  2.   

    解释参见
    http://hi.baidu.com/jmtbai/item/718fdcf9622f9329743c4c91
      

  3.   

    因为之前运行的一个例子是点击复制图片的canvas例子 里面操作ImageData是没有问题的~