h5标签canvas关于getImageData跨域的问题

在学习h5的时候，canvas标签中getImageData()报错：security error！

具体代码如下(chrome浏览器)：

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);

var c=ctx.getImageData(0,0,img.width,img.height);

for(var i=0;i

for(var j=0;j

var x=(i*4)*c.height+(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();

}

报错信息如下：Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

原因：createGSCanvas()调用了getImageData函数，但是图片存储在本地文件，默认为没有域名，chrome浏览器判定为跨域才报错！

解决方法：1、将图片放置在服务器中，由服务器返回给客户端浏览器，遵循同源策略；

2、在IE、Firefox浏览器中打开。

canvas关于getImageData跨域问题解决方法

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

快速解决Canvas.toDataURL 图片跨域的问题

出现Canvas.toDataURL 图片跨域问题怎么解决呢?下面小编就为大家带来一篇Canvas.toDataURL 图片跨域问题的快速解决方法.一起跟随小编过来看看吧 如题,在将页面的图片地址进行 ...

canvas图片的跨域问题

科普文章from MDN 实践证明这篇里的回答对的: .起个服务器再在chrome里试一下,应该会跑通. .右键chrome,属性,在目标后面加上(有个空格) --allow-file-access- ...

canvas.toDataURL 由于跨域报错的解决方法

关于canvas.toDataURL 由于跨域报错的解决方法 用过canvas,都知道toDataURL这个方法真好用,不仅合成图片用到它,压缩图片也用到它.但有一个问题,就是图片源不能跨域,不然会报 ...

js 利用canvas + flv.js实现视频流 截屏 、本地下载功能实现，兼容火狐，谷歌；canvas截屏跨域问题，无音频视频流加载不显示问题

项目:物联网监控项目----后台视频流管理(前端实现视频截屏功能) 本文就不同视频源分情况展示: 1 本地视频(项目同目录视频)截屏(canvas.getContext("2d).drawI ...

canvas 使用图片跨域问题

项目中需要生成海报,使用了前端生成图片的插件,将背景图,详情图,以及部分的文字说明放在一块并且生成一张新的图片,大体看了一下源码是通过canvas来实现的,在本地的时候完全没有问题,提交到服务器之后就 ...

解决Canvas.toDataURL 图片跨域问题

如题,在将页面的图片地址进行本地输出时(Html2Canvas.js),因不同源存在跨域问题,会出现toDataURL访问权限问题: [Redirect at origin 'http://sub1. ...

(H5)FormData+AJAX+SpringMVC跨域异步上传文件

最近都没时间整理资料了,一入职就要弄懂业务,整天被业务弄得血崩. 总结下今天弄了一个早上的跨域异步上传文件.主要用到技术有HTML5的FormData,AJAX,Spring MVC. 首先看下上传页 ...

H5之postMessage 。实现跨域

对于跨域我们有很多的解决方案,今天我来分享一下postMessage的那点事,postMessage是html5新增的一个解决跨域的一个方法,不过很可惜万恶的ie6,7不支持 postMessage( ...

随机推荐

Nginx配置指定媒体类型文件强制下载

由于业务需要,在点击显示链接(如www.xxx.com/2015-01-15/xxx.png)显示媒体资源(如图片.视频.音频.文档),而在点击下载链接(如www.xxx.com/2015-01-15 ...

hihoCoder #1199 : Tower Defense Game ——(树型dp)

题目链接:https://hihocoder.com/problemset/problem/1199. 题意:一棵以1为根的树,每个点有一个p值和q值,到这个点需要当前分数大于等于p,然后消耗掉(p- ...

Zabbix3.0 自动邮件报障

Zabbix3.0以后,自带的邮件报警支持SSL验证了, 但是仍然没有发送复数个邮箱以及CC,BCC的功能, 因此,我们还是得用别的方法来实现邮件报障. 实现方法有很多种,我用的是PHPmailer. ...

visual studio snippets风格

snippet挺好用,但是不是我喜欢的那种风格,比如if是这样的 if () { XX } 而我比较习惯这种: if () { XX } 可以这么做: 工具(Tools)——代码段管理器(Code S ...

js怎样生成json的数据

var row1 = {};row1.name = 'david';row1.age = '20'; //或者var row2 = {name: 'peter', age: '23'}; var da ...

(转)\r \r\n \t 的区别

小风吹雪 \r \r\n \t 的区别 http://www.360doc.com/content/12/0530/15/16538_214756101.shtml \n 软回车:       在Wi ...

SQL Server 2012的附件失败，与硬链接的问题

1.我在系统上做了硬链接,也就是把C盘的某个目录,映射为D盘. 2.把数据库文件mdf和ldf放入D盘.结果,SQL Server的企业管理器,无法从D盘里加载mdf或ldf文件,并且在目录下无法显示 ...

android.os.NetworkOnMainThreadException异常如何解决

android.os.NetworkOnMainThreadException 08-08 17:53:30.635 I/ArticleTable(22461): 添加成功 58 08-08 17:5 ...

关于 JavaScript 的 null 和 undefined，判断 null 的真实类型

null.undefined 博客地址: https://ainyi.com/39 undefined:表示一个变量最原始的状态,而非人为操作的结果 null:表示一个对象被人为的重置为空对象,而非一 ...