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 相关文章推荐
使用AOP改善javascript代码
May 01 Javascript
简介JavaScript中toTimeString()方法的使用
Jun 12 Javascript
vue.js初学入门教程(2)
Nov 07 Javascript
AngularJS过滤器filter用法分析
Dec 11 Javascript
jQuery实现导航回弹效果
Feb 27 Javascript
Vue服务器渲染Nuxt学习笔记
Jan 31 Javascript
JS遍历JSON数组及获取JSON数组长度操作示例【测试可用】
Dec 12 Javascript
JS/HTML5游戏常用算法之碰撞检测 像素检测算法实例详解
Dec 12 Javascript
微信小程序自定义单项选择器样式
Jul 25 Javascript
vue在线动态切换主题色方案
Mar 26 Javascript
PHP 502bad gateway原因及解决方案
Nov 13 Javascript
Vuex实现简单购物车
Jan 10 Vue.js
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
手冲咖啡应该是现代精品咖啡店的必备选项吗?
2021/03/03 冲泡冲煮
8个必备的PHP功能实例代码
2013/10/27 PHP
PHP 常用时间函数资料整理
2016/10/22 PHP
PHP设计模式之适配器模式(Adapter)原理与用法详解
2019/12/12 PHP
常见的5个PHP编码小陋习以及优化实例讲解
2021/02/27 PHP
JavaScript入门教程 Cookies
2009/01/31 Javascript
jquery随机展示头像代码
2011/12/21 Javascript
javascript打印大全(打印页面设置/打印预览代码)
2013/03/29 Javascript
js Array对象的扩展函数代码
2013/04/24 Javascript
使用js的replace()方法查找字符示例代码
2013/10/28 Javascript
Javascript学习笔记之 对象篇(三) : hasOwnProperty
2014/06/24 Javascript
js实现select二级联动下拉菜单
2020/04/17 Javascript
jquery自定义插件开发之window的实现过程
2016/05/06 Javascript
JS对HTML表格进行增删改操作
2016/08/22 Javascript
JS简单实现仿百度控制台输出信息效果
2016/09/04 Javascript
信息滚动效果的实例讲解
2017/09/18 Javascript
vue指令v-html使用过滤器filters功能实例
2019/10/25 Javascript
微信小程序实现带放大效果的轮播图
2020/05/26 Javascript
实现vuex原理的示例
2020/10/21 Javascript
[56:42]VP vs RNG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python中异常捕获方法详解
2017/03/03 Python
python处理Excel xlrd的简单使用
2017/09/12 Python
Python图像处理实现两幅图像合成一幅图像的方法【测试可用】
2019/01/04 Python
python执行精确的小数计算方法
2019/01/21 Python
python 3.7.4 安装 opencv的教程
2019/10/10 Python
pytorch方法测试详解——归一化(BatchNorm2d)
2020/01/15 Python
Selenium启动Chrome时配置选项详解
2020/03/18 Python
Python基于requests实现模拟上传文件
2020/04/21 Python
15个Pythonic的代码示例(值得收藏)
2020/10/29 Python
微软开源最强Python自动化神器Playwright(不用写一行代码)
2021/01/05 Python
在加拿大在线租赁和购买电子游戏:Game Access
2019/09/02 全球购物
党委书记岗位职责
2013/11/24 职场文书
党的群众路线教育实践活动宣传方案
2014/02/23 职场文书
2019职场实习报告该怎么写?
2019/07/01 职场文书
Python如何识别银行卡卡号?
2021/06/10 Python
Pillow图像处理库安装及使用
2022/04/12 Python