解决getImageData跨域问题

 <img src="u398.png" alt="这是个图片" id="avater">

    <script type="text/javascript">
        function convertToGS(img){
            img.color=img.src;
            img.grayscale=createGScanvas(img);
            img.onmouseover=function(){
                this.src=this.color;
            }
            img.onmouseout=function(){
                this.src=this.grayscale;
        }
            img.onmouseout();
    }
        function createGScanvas(img){
            var canvas=document.createElement("canvas");
            canvas.width=img.width;
            canvas.height-img.height;
            var ctx=canvas.getContext("2d");
            ctx.drawImage(img,0,0);
            //注意：getImageData只能操作与脚本位于同一个域中的图片//
            var c=ctx.getImageData(0,0,img.width,img.height);//将图片放在服务器中返回给浏览器显示，然后用IE或者firefox浏览器浏览
            for (i = 0; i < c.height; i++) {
                for ( j = 0; j < c.width; i++) {
                    var x=(i*4)*c.width+(j*4);
                    var r=c.data[x];
                    var g=c.data[x+1];
                    var b=c.data[x+2];
                    c.data[x]=c.data[x+1]=c.data[x+2]=(r+g+b)/3;
                }
            }

            ctx.putImageData(c,0,0,0,0,c.width,c.height);
            return canvas.toDataURL();
        }
        window.onload=function(){
            convertToGS(document.getElementById('avater'));
        }
    </script>

我们在自己本地放图片加载的时候，本地存储被默认为是没有域可言的，所以在浏览器解析的时候就出现了跨域的问题