js关于getImageData跨域问题的解决方法
更新时间：2016年10月14日 10:56:29 作者：WardLin
这篇文章主要为大家详细介绍了js关于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浏览器中打开。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家介绍了Varlet组件实现一个丝滑的点击水波效果示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
这篇文章主要介绍了JS和Nodejs中的事件驱动，对事件驱动感兴趣的同学，可以参考下2021-05-05
在日常工作中,我们可能需要拍摄一些照片并将图像合并到PDF文件中,这可以通过许多应用来完成,Dynamsoft Document Viewer让这一操作更加方便,在本文中,我们将使用Dynamsoft Document Viewer创建一个Web应用,用JavaScript将图像合并到PDF中,需要的朋友可以参考下2024-07-07
这篇文章主要为大家详细介绍了微信小程序实战商城系列之侧栏分类效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-04-04
展开和收起这样的效果想必大家早就眼熟了吧，利用闲暇时间用js写了一个具体功能：当自己处于全部显示的时候，点击自己的收起，自己收起等等感兴趣的你可以参考下哈2013-03-03
vite打包优化vite-plugin-compression的使用示例详解
这篇文章主要介绍了vite打包优化vite-plugin-compression的使用,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-09-09
javascript跨域方法、原理以及出现问题解决方法（详解）
javascript出于安全方面的考虑，不允许跨域调用其他页面的对象。但是在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦。跨域简单的理解就是因为javascript同源策略的限制，a.com域名下的js无法操作b.com 或者是c.a.com域名下的对象2015-08-08
javascript:history.go()和History.back()的区别及应用
为提高用户体验度，可能会使用到刷新 前进 后退等相关更能，本文将以此问题详细介绍javascript:history.go()和History.back()的区别及应用，需要的朋友可以参考下2012-11-11
WXSS(WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式,下面这篇文章主要给大家介绍了关于微信小程序WXSS和全局、页面配置的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-08-08
这篇文章主要为大家详细介绍了微信小程序实现自定义picker选择器弹窗内容，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-07-07
最新评论