canvas 改变图片颜色

春花儿 2013-06-14 09:37:31

<!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);这行代码不安全颜色也没有改变~ 不知道为什么？？？？

...全文

442 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

孟子E章 2013-06-14

打赏
举报

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

孟子E章 2013-06-14

打赏
举报

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

春花儿 2013-06-14

打赏
举报

大神帮帮忙啊在线等~

春花儿 2013-06-14

打赏
举报

好了~~ 谢谢结贴

春花儿 2013-06-14

打赏
举报

引用 3 楼 net_lover 的回复:

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

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

春花儿 2013-06-14

打赏
举报

引用 2 楼 net_lover 的回复:

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

大神测试过了？