zoukankan      html  css  js  c++  java
  • canvas关于getImageData跨域问题解决方法

    一、问题:在使用html5的canvas是,当用到getImageData方法获取图片信息时,会碰到跨域无法获取的情况,代码如下:

    document.getElementById("pic").onload=function(){
        var c=document.getElementById("myCanvas");     
        var ctx=c.getContext("2d");
        var img=document.getElementById("pic");
        ctx.drawImage(img,0,0,300,300);
        var imgData=ctx.getImageData(0,0,c.width,c.height);  //问题所在
        // 反转颜色
        for (var i=0;i<imgData.data.length;i+=4)
        {
            imgData.data[i]=255-imgData.data[i];
            imgData.data[i+1]=255-imgData.data[i+1];
            imgData.data[i+2]=255-imgData.data[i+2];
            imgData.data[i+3]=255;
        }
        ctx.putImageData(imgData,0,0);
    };

    在chrome会提示:

    "Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
    at HTMLImageElement.document.getElementById.onload"的错误信息

    在IE中会提示:

    "security error!"的错误信息

    二、原因:图片存储在本地时,是默认没有域名的,用getImageData方法时,浏览器会判定为跨域而报错!

    三、方法:1.把图片放置在服务器中,通过服务器返回给客户端,遵循同源策略;

                   2.用firefox浏览器打开;

    在firefox中效果如下:

  • 相关阅读:
    10 款最佳剪贴板管理器
    悉数美剧《黑客军团》中的黑客工具
    Vim的使用方法
    Mysql跨平台(Windows,Linux,Mac)使用与安装
    Linux下网络故障诊断
    RHEL6.2下挂载光驱安装软件
    MySQL数据库服务器的架设
    Unix如何轻松快速复制
    【Linux基础】Linux常用命令汇总
    博客编号数字密码
  • 原文地址:https://www.cnblogs.com/lodadssd/p/6238250.html
Copyright © 2011-2022 走看看