`
flex_莫冲
  • 浏览: 1091919 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

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

 
阅读更多
在本机测试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
分享到：
| javascript征途笔记
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

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

    总结而言，当我们在JavaScript中遇到关于canvas的getImageData方法的跨域错误时，我们应该优先考虑将资源部署到服务器上以遵循同源策略。这是保证Web应用安全、兼容和标准化的最有效方法。同时，开发者应当充分理解...

    详解如何解决canvas图片getImageData,toDataURL跨域问题

    这将在Chrome中导致“DOMException: Failed to execute ‘getImageData’”错误，Firefox则提示“SecurityError: The operation is insecure.”。 三、HTML的`crossOrigin`属性 为了解决这个问题，HTML5引入了`...

    3.10 getImageData 和 putImageData进行图像的像素级处理｜使用Canvas进行像素级操作｜Canvas图形、动画、游戏开发从入门到精通全系列课程

    3.10_getImageData_和_putImageData进行图像的像素级处理｜使用Canvas进行像素级操作｜Canva

    跨域图片资源权限(CORS enabled image)

    跨域图片资源权限（CORS enabled image）是指在Web页面中，当使用canvas元素加载并展示其他域（即非当前源）的图片资源时，由于浏览器同源策略的安全限制，如果没有得到该图片源的明确授权，使用该图片资源的canvas...

    IE11下使用canvas.toDataURL报SecurityError错误的解决方法

    在尝试获取canvas对象上的数据URL时，如果canvas上绘制了来自不同源的图片，即使已经设置了`crossOrigin = "Anonymous"`，IE11仍然可能抛出这个错误。 首先，让我们理解`canvas.toDataURL`方法的作用。它用于将...

    server-for-getimagedata

    服务器获取图像数据 服务器需要使用将指定URL的图像转换为base64，并以JSONP格式返回 ...$ cd server-for-getimagedata $ npm install $ npm start http://localhost:5000/?url=画像のURL&callbac

    识别二维码支持所有浏览器，多研究.zip

    var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); var result = jsqrcode.decode(imageData.data, canvas.width, canvas.height); if (result) { console.log('识别结果:', result); // ...

    利用html5 canvas破解简单验证码及getImageData接口应用

    不过，这种方法存在一定的风险，因为自动识别验证码可能违反了一些服务提供商的使用政策，甚至可能导致账号被封禁。此外，如果验证码设计的目标就是防止机器自动识别，那么不断进化的验证码技术可能会让这种基于像素...

    HTML5 Canvas 游戏开发实例详解

    在本地开发环境中，可能会遇到同源策略的安全限制导致的错误。对于不同浏览器，可以采取以下措施： - **Firefox**：通过在 about:config 页面中设置 `security.fileuri.strict_origin_policy` 为 `false` 来禁用...

    自定义手机浏览器Html+二维码扫描插件

    本项目“自定义手机浏览器Html+二维码扫描插件”旨在提供一个解决方案，允许用户通过HTML5技术和JavaScript实现二维码的扫描与识别，从而增强用户体验。 首先，我们要了解HTML5摄像头API。这是该项目的核心部分，它...

    详解Canvas 跨域脱坑实践

    为了绕过浏览器的同源策略，可以在获取图片资源之前，设置图片的`crossOrigin`属性为`'Anonymous'`。这样做告诉浏览器，请求该资源是跨域的，但不需要携带凭证信息（例如Cookies）。然而，需要注意的是，如果图片...

    详解canvas绘图时遇到的跨域问题

    这个问题是由于浏览器的同源策略（Same-Origin Policy）所导致的，该策略是为了防止恶意网站通过JavaScript获取并操作其他网站的数据。 同源策略限制了JavaScript对不同源的资源进行读取、写入等操作，包括Canvas。...

    【更新】精易web浏览器填表模块1.3-易语言

    修改命令：“el_img_GetImageData”增加高级模式，可以取任意元素的界面图（主要为了应对有些网页把图片写成背景图导致原命令失效），由于这是异步命令，所以需要增加“等待”参数 PS： 由于论坛不稳定，我这里无法...

    浏览器实现滤波源代码web-audio-image-filtering-master

    在现代Web开发中，利用浏览器的能力来实现各种高级功能已经成为趋势。"浏览器实现滤波源代码web-audio-image-filtering-master"项目就是这样一个例子，它专注于在浏览器环境中应用音频和图像处理技术，特别是滤波器...

    Js图片过滤效果

    10. **跨域图像**：如果图像资源不在同一域名下，需要设置`crossOrigin`属性，以避免同源策略限制导致的权限错误。 总的来说，JavaScript提供了强大的能力来创建和控制图片过滤效果，无论是简单的颜色调整还是复杂...

    精易web浏览器填表模块-易语言

    el_img_GetImageData //图片框_取图片xx，程序内部不会判断是否为图片，请注意，m_WebView为0将返回{}。 el_img_GetCanvasData //图片框_取Canvas图片xx，程序内部不会判断是否为图片，请注意，m_WebView为0将返回{}...

    【更新】精易web浏览器填表模块-易语言

    el_img_GetImageData //图片框_取图片xx，程序内部不会判断是否为图片，请注意，m_WebView为0将返回{}。 el_img_GetCanvasData //图片框_取Canvas图片xx，程序内部不会判断是否为图片，请注意，m_WebView为0将返回{}...

    JS图片剪裁、上传插件

    总的来说，"JS图片剪裁、上传插件"是一个集成了JavaScript和jQuery功能的实用工具，通过Canvas进行图片剪裁，利用Ajax实现无刷新上传，为开发者提供了方便、灵活的图片处理解决方案。其核心知识点涵盖了JavaScript...

Magicbox
Global site tag (gtag.js) - Google Analytics