canvas里调用getImageData的报security的问题
canvas元素支持绘制任意图片元素:
var ctx = document.getElementById("canvas").getContext("2d");
if (ctx){
var img = new Image();
img.src = img_url;
img.onload = function(){
ctx.drawImage(img, 0, 0, 640, 480);
}
}
我们还可以通过context的getImageData方法获取图像每个像素的数据,但是如果你的img_url和你的页面不是同源的,那么getImageData会导致错误,比如:
var ctx = document.getElementById("canvas").getContext("2d");
if (ctx){
var img = new Image();
img.onload = function(){
try {
ctx.drawImage(img, 0, 0, 640, 480);
var originImageData = ctx.getImageData(0, 0, 640, 480);
}
catch (e) {alert(e.message)}
}
img.src = img_url;
}
我们增加了try/catch来捕获异常,在Chrome下你会得到这个错误:SECURITY_ERR: DOM Exception 18,而在Firefox下为:Security error。
解决办法:
1、使用tomcat或其他web服务器.在服务器中运行.
2、修改浏览器配置(不推荐)
Firefox:在地址栏输入about:config,然后设置security.fileuri.strict_origin_policy为false。
Chrome:在命令行中运行 /path-to-chrome/chrome.exe –allow-file-access-from-files。
最新文章
- [LeetCode] Shortest Word Distance 最短单词距离
- C#程序调用CodeSoft预先设计好的标签模块实现打印功能
- oracle中number类型的数据使用as string 得到的值为null
- linux 解压
- 关于Freelists和Freelist Groups的研究【转】
- android 从服务器上获取APK下载安装
- ASP.NET LINQ SQL执行超时的问题
- Problem E: Product
- Windows Phone开发(10):常用控件(上)
- 设计模式的征途—15.观察者(Observer)模式
- 关于《ASP.NET MVC企业级实战》
- js中定义对象的几种方式
- 目标文件obj的各段 2
- 常用 ADB 命令[ZZ]
- python3+requests库框架设计03-请求重新封装
- 【读书笔记】iOS-开发者证书
- 【OpenGL】三角形
- MongoDB资料汇总专题
- Ubuntu:替换DASH图标
- cdoj203-Islands 【并查集】