js关于getImageData跨域问题的解决方法


Posted in Javascript onOctober 14, 2016

在学习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浏览器中打开。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 更新 JavaScript 数组的 uniq 方法
Jan 23 Javascript
JS实现清除指定cookies的方法
Sep 20 Javascript
node.js中的fs.renameSync方法使用说明
Dec 16 Javascript
js对象的复制继承实例
Jan 10 Javascript
Bootstrap入门书籍之(三)栅格系统
Feb 17 Javascript
深入浅析JS的数组遍历方法(推荐)
Jun 15 Javascript
jQuery实现订单提交页发送短信功能前端处理方法
Jul 04 Javascript
js轮播图透明度切换(带上下页和底部圆点切换)
Apr 27 Javascript
jQuery实现的简单在线计算器功能
May 11 jQuery
vue组件父与子通信详解(一)
Nov 07 Javascript
详解webpack中的hash、chunkhash、contenthash区别
Jan 05 Javascript
JavaScript惰性载入函数实例分析
Mar 27 Javascript
AngularJS 与Bootstrap实现表格分页实例代码
Oct 14 #Javascript
深入学习js瀑布流布局
Oct 14 #Javascript
微信小程序 地图定位简单实例
Oct 14 #Javascript
Bootstrap作品展示站点实战项目2
Oct 14 #Javascript
JS控制页面跳转时未请求要跳转的地址怎么回事
Oct 14 #Javascript
js中json处理总结之JSON.parse
Oct 14 #Javascript
Bootstrap优化站点资源、响应式图片、传送带使用详解3
Oct 14 #Javascript
You might like
超强分页类2.0发布,支持自定义风格,默认4种显示模式
2007/01/02 PHP
删除无限分类并同时删除它下面的所有子分类的方法
2010/08/08 PHP
php实现点击可刷新验证码
2015/11/07 PHP
Thinkphp批量更新数据的方法汇总
2016/06/29 PHP
Extjs Gird 支持中文拼音排序实现代码
2013/04/15 Javascript
jquery实现图片裁剪思路及实现
2013/08/16 Javascript
jQuery实现的经典滑动门效果
2015/09/22 Javascript
JavaScript基本语法学习教程
2016/01/14 Javascript
DWR中各种java方法的调用
2016/05/04 Javascript
JS获取元素多层嵌套思路详解
2016/05/16 Javascript
JavaScript方法_动力节点Java学院整理
2017/06/28 Javascript
JS和jQuery通过this获取html标签中的属性值(实例代码)
2017/09/11 jQuery
Vue.js 实现微信公众号菜单编辑器功能(二)
2018/05/08 Javascript
React实现全局组件的Toast轻提示效果
2018/09/21 Javascript
vue-router命名路由和编程式路由传参讲解
2019/01/19 Javascript
jQuery选择器之基本过滤选择器用法实例分析
2019/02/19 jQuery
python实现飞机大战
2018/09/11 Python
python判断一个对象是否可迭代的例子
2019/07/22 Python
python 提取文件指定列的方法示例
2019/08/07 Python
IronPython连接MySQL的方法步骤
2019/12/27 Python
Python用Jira库来操作Jira
2020/12/28 Python
详解HTML5 window.postMessage与跨域
2017/05/11 HTML / CSS
瑰珀翠美国官网:Crabtree & Evelyn美国
2016/11/29 全球购物
PAUL HEWITT手表美国站:德国北部时尚生活配饰品牌,船锚元素
2017/11/18 全球购物
世界上第一个创建了罩杯系统的美国内衣品牌:Maidenform
2019/03/23 全球购物
英国高级健康和美容产品零售商:Life and Looks
2019/08/01 全球购物
abstract class和interface有什么区别
2013/08/04 面试题
公司综合部的成员自我评价分享
2013/11/05 职场文书
三月雷锋月活动总结
2014/07/03 职场文书
班子个人四风问题整改措施
2014/10/04 职场文书
个人学习党的群众路线教育实践活动心得体会
2014/11/05 职场文书
个人先进事迹材料范文
2014/12/29 职场文书
党员发展大会主持词
2015/07/03 职场文书
2016入党积极分子党课学习心得体会
2015/10/09 职场文书
mysql5.6主从搭建以及不同步问题详解
2021/12/04 MySQL
python turtle绘制多边形和跳跃和改变速度特效
2022/03/16 Python