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>

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

  • 相关阅读:
    多线程的同步锁和死锁
    多线程同步
    oracle11g导出表时会发现少表,空表导不出解决方案
    GET和POST两种基本请求方法的区别
    数据库优化
    JavaScript中的基本数据类型
    Spring Data Jpa简单了解
    单例和多例详解
    jsp九大内置对象
    JavaEE 前后端分离以及优缺点
  • 原文地址:https://www.cnblogs.com/dongcong/p/6611938.html
Copyright © 2011-2022 走看看