h5标签canvas关于getImageData跨域的问题
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<c.height;i++){
for(var j=0;j<c.width;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浏览器中打开。
h5标签canvas关于getImageData跨域的问题的更多相关文章
- 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( ...
随机推荐
- Delphi的IDHTTP的基本用法
一.IDHTTP的基本用法 IDHttp和WebBrowser一样,都可以实现抓取远端网页的功能,但是http方式更快.更节约资源,缺点是需要手动维护cook,连接等 IDHttp的创建,需要引入ID ...
- 网站注册信息的JS全码
<div class="box_index2"> <div class="login_title"> ...
- 一个读取propeties配置文件的工具类,线程安全的
public class ConfigUtil { private static Map<String,Properties> map = new HashMap<String,Pr ...
- 转:ASCII码表_全_完整版
ASCII码表 ASCII值 控制字符 ASCII值 控制字符 ASCII值 控制字符 ASCII值 控制字符 0 NUL 32 (space) 64 @ 96 . 1 SOH 33 ! 65 A 9 ...
- JAVA多态示例
这多态,我觉得是最利害的.在开发大型程序中. 但,也是需要经过足够多的实践经验才能随心利用的. class Quadrangle{ private Quadrangle[] qtest = new Q ...
- 认识Android
安卓的特点开放性平等性无界性方便性硬件的丰富性 Android操作系统之中,一共将体系结构划分为四层:应用层(Application).应用框架层(Application Framework).系统运 ...
- 输出宽字符数组 C++
std::cout << "ASCII and ANSI" << std::endl;std::wcout << L"INSERT M ...
- [认知]ClassLoader 认知一二三
曾经深入了解过ClassLoader,但一直没有时间去总结,现在以参考+自我认识的方式总结一下ClassLoader的相关内容,不能保证100%全,但目前对于一个毛头孩子来说,enough! 首先就要 ...
- linux下编译eXosip、osip,以及UAC和UAS的例子
从网站上看到了这样的一篇博文 :Windows下编译eXosip.osip,以及UAC和UAS的例子 (链接:http://www.cnblogs.com/dyllove98/archive/2013 ...
- [LeetCode] Search in Rotated Sorted Array I (33) && II (81) 解题思路
33. Search in Rotated Sorted Array Suppose a sorted array is rotated at some pivot unknown to you be ...