解决浏览器同源策略导致的getImageData错误

最新推荐文章于 2022-04-24 15:45:08 发布
最新推荐文章于 2022-04-24 15:45:08 发布
阅读量1.2k 收藏 2
点赞数
分类专栏： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mochong/article/details/84055015
版权
在本机测试HTML5 Canvas程序的时候，如果用context.drawImage()后再用context.getImageData()获取图片像素数据的时候会抛出错：SECURITY_ERR: DOM Exception 18。这是Javascript同源策略（Same origin policy）造成的。目前发现这个问题在Firefox和Chrome中均存在。

解决办法如下：
Firefox：在地址栏输入about:config，然后设置security.fileuri.strict_origin_policy为false。
Chrome：在命令行中运行 /path-to-chrome/chrome.exe –allow-file-access-from-files。
来源：http://www.riaidea.com/blog/archives/358.html
莫冲
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js关于getImageData跨域问题的解决方法
10-21
主要为大家详细介绍了js关于getImageData跨域问题的解决方法,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
利用html5 canvas破解简单验证码及getImageData接口应用
09-28
：HTML 5中的canvas有个接口getImageData可以用来从验证码图像中取得像素数据。每一个像素有对应r,g,b,a四个值，r,g,b是红绿蓝三色，a是透明度;观察了一下，接下来说下思路及实现代码，感兴趣的你可不哟啊走开啊
getImageData错误
yan_zhizi3的专栏
03-04 2100
在本地写canvas动画，浏览器报错Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data. 不知道是怎么回事，后面才明白，getImageDate有个跨域问题。百度后发现有位网友的解答很全面。全文如下 1.首先没
html5 drawImage后getImageData出错解决
clh604的专栏
01-30 6671
在本机测试HTML5 Canvas程序的时候，如果用context.drawImage()后再用context.getImageData()获取图片像素数据的时候会抛出错：SECURITY_ERR: DOM Exception 18，翻译成中文就是说操作不安全，针对这个有两个解决办法（推荐第一种） 我们先看下会出错的源码 ar canvas=document.getElementB
canvas的getImageData引起的浏览器安全错误
08-14 664
[align=center]/*-----------------------------------------IT EYE 祈祷幸福原创，转载请注明。-----------------------------------------*/ [/align] 今天用canvas的图片数据获取函数：getImageData [code="javascript"] var img = ...
解决getImageData跨域问题
热门推荐
molaifeng的专栏
12-31 3万+
在项目开发过程中要用到html5增加的getImageData方法来实现刮刮卡的效果，后台上传图片，手机端用手刮。在本地开发没遇到问题，上线之后发现刮不了，提示"Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tai...
详解如何解决canvas图片getImageData,toDataURL跨域问题
09-22
这将在Chrome中导致“DOMException: Failed to execute ‘getImageData’”错误，Firefox则提示“SecurityError: The operation is insecure.”。 三、HTML的`crossOrigin`属性 为了解决这个问题，HTML5引入了`...
自定义手机浏览器Html+二维码扫描插件
09-17
本项目“自定义手机浏览器Html+二维码扫描插件”旨在提供一个解决方案，允许用户通过HTML5技术和JavaScript实现二维码的扫描与识别，从而增强用户体验。 首先，我们要了解HTML5摄像头API。这是该项目的核心部分，它...
微信小程序加载图片报错
笑到世界都狼狈的博客
06-04 2309
刚开始学习小程序，对很多东西还不是很熟悉，页面写了个图片，加载不出来，一直报错： VM436:1 Failed to load local image resource /pages/images/1.jpg the server responded with a status of 500 (HTTP/1.1 500 Internal Server Error) 找了一下解决的办法，差不多都是说加个wx:if就好了 <image wx:if='{{news.poster}}' src="{{
ASP.NET中用HttpPostedFile.SaveAs(FileName)方法上传文件，文件大小限制
人生何适不艰难 赖是胸中万斛宽
05-31 2783
在web.config中加入
img图片加载出错处理（转载）
03-07 355
为了美观当网页图片不存在时不显示叉叉图片当在页面显示的时候，万一图片被移动了位置或者丢失的话，将会在页面显示一个带X的图片，很是影响用户的体验。即使使用alt属性给出了”图片XX”的提示信息，也起不了多大作用。其实，可以这样处理：当图片不存在的时候，会触发onerror事件，我们可以在该事件中做一下补救的工作，比如： 1、让这个图片元素隐藏： <img src="图片...
java上传png_java上传png图片出现红色背景
weixin_26969967的博客
02-13 450
java图片上传出现红色背景java图片服务器上传图片都很正常，唯独上传png图片时，png图片变成红色背景原因是读取上传数据时用的是ImageIO.read(inputstream)方法public static BufferedImage getImages(byte[] data) throws IOException {ByteArrayInputStream input = new By...
ImageIo.read读取图片有一层红色解决办法
weixin_30877227的博客
06-04 580
使用ImageIo读取图片时，有时候会出现一层红色遮罩，起初以为是自己程序出问题，上网查了下，有人说是JAVA的BUG， http://blog.csdn.net/shixing_11/article/details/6897871这篇文章中介绍的是利用ToolKit.getImage方法替代ImageIo的read方法，但由于我要读取的网络图片，尽管ToolKit有提供通过url获取图片的方法...
DrawImage构造缩略图
MADfox1983的专栏
04-21 679
导读： 　　1、如当源图尺寸过大时,生成的缩略图质量会很低，而且同源图的尺寸是一种正比的关系 　　2、当源图是一个Gif图片且含有透明色时，生成的缩略图会将透明色填充成黑色。 　　今天在工作中就遇到这样的问题，基于上面二个原因，于是决定放弃GetThumbnailImage方法了。 　　最终采用Graphics类的DrawImage方法至于质量问题，适当的设定一下，可以达到很好的效果。 　　 　　
Javascript同源策略对context.getImageData的影响
技术成就梦想，知识改变命运 !
02-26 1457
在本机测试HTML5 Canvas程序的时候，如果用context.drawImage()后再用context.getImageData()获取图片像素数据的时候会抛出错：SECURITY_ERR: DOM Exception 18。这是Javascript同源策略（Same origin policy）造成的。目前发现这个问题在Firefox和Chrome中均存在。 解决办法如下： Fire
Chrome浏览器启动命令行参数
wzj的博客
01-11 1万+
1 --allow-outdated-plugins 不停用过期的插件。 2 --allow-running-insecure-content 默认情况下，https 页面不允许从 http 链接引用 javascript/css/plug-ins。添加这一参数会放行这些内容。 3 --allow-scripting-gallery 允许拓展脚本在官方应用中心生效。默认情况下，出于安全因素考虑这些脚本都会被阻止。 4 --disable-desktop-notifications 禁用桌面通知，在 Wind
Chrome浏览器启动命令行参数大全
一目知之
04-24 1万+
浏览器启动命令行参数大全
canvas里调用getImageData的问题
晓
10-15 1万+
网上分析1：canvas元素支持绘制任意图片元素：var ctx = document.getElementById("canvas").getContext("2d"); if (ctx){ var img = new Image(); img.onload = function(){ ctx.drawImage(img, 0, 0, 640, 480);
解决java中使用getImage（）导入图片失败问题
gonglei181818的博客
07-24 4878
解决java中使用getImage（）导入图片失败问题 在使用getImage(fileName)方法导入图片时，一直失败。后来加入相对路径解决找不到图片问题。 代码如下 image = Toolkit.getDefaultToolkit().getImage(ChessBoard.class.getClassLoader().getResource("img/board.jpg")); shad...
浏览器不支持getImageData解决方法
最新发布
06-06
如果您的浏览器不支持getImageData，这可能是因为您的浏览器版本太旧或者您的浏览器不支持HTML5 Canvas。为了解决这个问题，您可以尝试以下几个方法： 1. 升级您的浏览器版本，确保您的浏览器支持HTML5 Canvas。 2. 尝试使用其他浏览器，例如Chrome、Firefox、Safari等，这些浏览器都支持HTML5 Canvas。 3. 如果您必须在不支持HTML5 Canvas的浏览器中使用getImageData，您可以尝试使用Polyfill来模拟Canvas API。一些流行的Polyfill包括FlashCanvas和ExplorerCanvas。 请注意，这些解决方案可能不是完美的，因为它们可能会导致性能问题或兼容性问题。因此，我们建议您尽可能使用支持HTML5 Canvas的浏览器。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值