zoukankan      html  css  js  c++  java
  • 解决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>

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

  • 相关阅读:
    以CCF CSP认证为抓手,积极探索软件基础能力递进式培养体系
    HDU1878 欧拉回路
    HDU1878 欧拉回路
    Java---casting(对象转型)
    Java---package和import语句
    Java---方法的重写
    Java---继承中的构造方法
    Java---内存分析
    Java---多个类写在一个类文件中
    Java---SSH框架认识
  • 原文地址:https://www.cnblogs.com/dongcong/p/6611938.html
Copyright © 2011-2022 走看看