关于Canvas中的"The canvas has been tainted by cross-origin data"跨域问题_the canvas has been tainted by cross-origin data.-程序员宅基地

在学习Html5中的Canvas的使用“图像”部分,用到getImageData方法获取图片信息,代码如下:


浏览器会报如下图所示的错误:

谷歌浏览器报代码的第41行错误,即“var d = c.getImageData(0,0,300,300);”这句代码有问题。

Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.    at HTMLImageElement.img.onload”,字面翻译为“未能执行‘getImageData‘方法,由于这个canvas已经被污染了”。在翻阅《火狐开发者文档》时,发现有提到这么一段话,“在 HTMLImageElement上使用crossOrigin属性,你可以请求加载其它域名上的图片。如果图片的服务器允许跨域访问这个图片,那么你可以使用这个图片而不污染canvas,否则,使用这个图片将会污染canvas”。

而上文中出现问题的图片是存放在本地的,本地的图片默认是没有域名的,所以浏览器都认为你是跨域,导致报错。

所以,问题就很好解决了,将图片放在服务器中,即通过服务器运行该网页,操作结果如下:


果然没有再报上面那个错了。

另外,用火狐浏览器打开不会出现这个问题。

在解决这个问题百度的时候,看到有朋友这样解决问题,修改谷歌浏览器的“属性”->"目标"的值,在其末尾添加“ --disable-web-security”,再重启浏览器。。。我在想办法解决这个问题时,也试着使用该方法去尝试解决,发现并没什么用。故我想改浏览器启动参数只是让自己电脑支持而已,解决不了真正的跨域问题。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qianxing111/article/details/77939013

智能推荐

计算机网络管理员(三级)理论A卷-含答案【9A文】-程序员宅基地

文章浏览阅读316次。【9A文】计算机网络管理员(三级)理论鉴定试题A-含答案【MeiWei_81重点借鉴文档】 【MeiWei_81重点借鉴文档】 计算机网络管理员(三级)理论鉴定试题A 注 意 事 项 1、考试时间:90分钟。 2、请在试卷标封处填写姓名、准考证号和所在单位的名称。 3、请仔细阅读答题要求,把答案填写到答案卷,否则以零分计。 一、单项选择题(第1题~第40题。选择一个正确的答案,将相应的..._三级理论性理论a在线

【转】MBIST总结-程序员宅基地

文章浏览阅读1w次,点赞16次,收藏167次。2. MBIST的插入阶段:用工具插入Mbist时,我们既可以在RTL代码插入,也可以在netlist里面插入。目前,常见的做法是在netlist插入。但是,由于插入的Mbist逻辑是RTL代码,这样如果在netlist里面插入的话,我们还需要再进行一次综合。如果在RTL代码中直接插入Mbist,则只需要综合一次。为什么现在都推荐在netlist里面插入Mbist,而不是在RTL插入呢?回答1:综合通常是针对unit来做的,而布局布线通常针对partion,而mbist逻辑会涉及到很多个uni._mbist

笔记本电脑更改不了mac地址,网络连接中没有以太网_笔记本mac地址不能改-程序员宅基地

文章浏览阅读172次,点赞9次,收藏4次。笔记本更改物理地址,无法更改_笔记本mac地址不能改

【阅读】《Linux高性能服务器编程》——第十三章:多进程编程_linux高性能服务器编程 13.9-程序员宅基地

文章浏览阅读186次。多进程编程13.1 fork系统调用13.2exec系列系统调用13.3 处理僵尸进程13.4 管道13.5 信号量13.5.1 信号量原语13.5.2 semget系统调用13.5.3 semop系统调用13.5.4 semctl系统调用13.5.5 特殊键值IPC_PRIVATE13.6 共享内存13.6.1 shmget系统调用13.6.2 shmat和shmdt系统调用13.6.3 shmctl系统调用13.6.4 共享内存的POSIX方法13.6.5 共享内存实例13.7 消息队列13.7.1 m_linux高性能服务器编程 13.9

Atomic原子类-程序员宅基地

文章浏览阅读1.2k次,点赞27次,收藏23次。Atomic类位于java.util.concurrent.atomic包下,它们利用CAS(Compare-And-Swap)操作来保证线程安全性,而无需使用传统的锁机制。这些类提供了一种轻量级的同步机制,适用于多线程环境下对共享变量的高效更新。

边长为n的正方形最多可以放下多少个半径为r的圆?_怎么计算矩形里面可以放入最多数量的圆-程序员宅基地

文章浏览阅读4.7k次,点赞10次,收藏30次。今天看见数学院群里有人在讨论一道有意思的题目,题意好像是这样的:在一个1010的正方形里最多可以放多少个半径为1圆?有大佬在知乎里找到了1010的正方形能放多少个直径为1的圆,那么最优的放置方法如下:从图中可以看出,并不是每一排放10个,放10排是最优的。因为这样会造成中间的空隙很大。可以看出更优的放置方法是:交错着放,即(图中从下往上看):第一排放10个,第二排放9个,第三排放10个。第二排..._怎么计算矩形里面可以放入最多数量的圆

随便推点

刚入算法时候自己的胡乱整理-javaAPI,JDKAPI,算法常用javaAPI,算法常用工具类-程序员宅基地

文章浏览阅读672次,点赞14次,收藏29次。算法第一步:先学API实在是太多了,我刷了一百道左右,整理出来了里边用到的java中的API如下,有点乱,但是用的时候可以control+f进行搜索,当然这也是我的一个简化版本的API

基于SSM的酒店管理系统的设计与实现_酒店管理ssm课设-程序员宅基地

文章浏览阅读284次。该毕业设计主要解决了酒店日常工作中的一些问题,使用了spring mvc,spring,mybatis框架组合,数据库采用了mysql,使用tomcat作为服务器。系统分为前台和后台两部分。主要功能包括:用户,房间类型,房间查看,房间预定,留言,支持多条件查询,分页等非业务功能。源码http://www.byamd.xyz/dljd.html..._酒店管理ssm课设

通过github提升自己-测试反馈、持续精进-程序员宅基地

文章浏览阅读77次。如果我们仅仅是将自己的代码commit、push到github上,那么对于我们的技术不会有太多的提升。我们所做的仅仅只是将github当成了我们的网盘。我们每发布一个版本的时候,是不是也就意味着给用户一个新的版本——持续交付。敏捷软件开发显然我是在扯淡,这和敏捷软件开发没有什么关系。不过我也不知道瀑布流是怎样的。说说我所知道的一个项目的组成吧:看板式管理应用程序(如trello,简单地说就是管理软..._guihub上代码交付通过测试

Ecshop支付宝网银支付插件|支付宝网银直连插件|纯网关网银接口-程序员宅基地

文章浏览阅读2.2k次。2019独角兽企业重金招聘Python工程师标准>>> ..._齐齐哈尔奇闻科技有限责任公司 网银支付插件

Fiddler功能讲解_fiddler说明fiddler结构每项什么意思-程序员宅基地

文章浏览阅读1.2k次。原文链接:https://blog.csdn.net/abcnull/java/article/details/89001642代理模式Fiddler 的代理模式有流模式和缓冲模式,其中流模式是一种实时通信模式,请求之后实时的返回,更接近浏览器真实行为,另外一种是缓冲模式,等所有请求到了再一起返回,可以来控制最后的服务器响应,实际中我们可以根据具体场景选用不同代理模式,fiddler 默认缓冲模式,这里可改变菜单栏file这里与文件导入导出加载有关Capture Traffic:默认勾_fiddler说明fiddler结构每项什么意思

给定经纬度计算距离_通过经纬度坐标计算距离的方法(经纬度距离计算)ZZ-程序员宅基地

文章浏览阅读925次。通过经纬度坐标计算距离的方法(经纬度距离计算)最近在网上搜索“通过经纬度坐标计算距离的方法”,发现网上大部分都是如下的代码:#define PI 3.14159265static double Rc = 6378137; // 赤道半径static double Rj = 6356725; // 极半径class JWD{public:double m_Longitude, m_Latitud..._qt中知道两点经纬度求距离和在坐标系上显示点位置