关于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

智能推荐

datax到hive数据全部为空_datax二次开发-程序员宅基地

文章浏览阅读733次。一、datax插件hbase12xwriter开发查看datax源码,发现有hbase094xwriter和hbase11xwriter源码,说明datax支持hbase写入,再查看测试和生产环境使用的hbase版本是:hbase-1.2.0-cdh5.8.4自己写一个hbase12xwriter插件包开发流程:1、搭建项目模块moduledatax-all项目上右击->New->ot..._datax 同步mysql数据到hive上执行成功但是没数据

Nvidia官方实现: 量化感知训练QAT和稀疏化Sparsity_nvidia developer blog qat-程序员宅基地

文章浏览阅读795次。TensorRT 的 pytorch_quantization 是一个实现的。_nvidia developer blog qat

使用Nuitka将py文件打包为pyd格式_nuitka pyd-程序员宅基地

文章浏览阅读2.2k次。使用Nuitka打包pyd_nuitka pyd

【华为认证5G工程师 HCIA-5G V2.0(中文版)发布通知】_华为考试h35-660 v2版本什么时候开始的-程序员宅基地

文章浏览阅读943次。华为认证hcia-5G V2.0(中文版)自2021年6月8日起,正式中国区发布。发布概述基于“平台+生态”战略,围绕“云-管-端”协同的新ICT技术架构,华为公司打造了覆盖ICT领域的认证体系,包含ICT技术架构与应用认证、云服务与平台两类认证。根据ICT从业者的学习和进阶需求,华为认证分为工程师级别、高级工程师级别和专家级别三个认证等级。华为认证覆盖ICT领域,符合ICT融合的技术趋势,致力于提供领先的人才培养体系和认证标准,培养数字化时代的新型ICT人才,构建良性的ICT人才生态。HC_华为考试h35-660 v2版本什么时候开始的

kubernetes各个条件下使用nginx-ingress进行路由映射_nginx.ingress.kubernetes.io-程序员宅基地

文章浏览阅读931次。在这个例子中,/app1 和 /app2 的请求路径都会被重写,但每个请求路径的替换目标不同。/app1 的请求路径将重写为 /,而 /app2 的请求路径将重写为 /foo/1、nginx-ingress路由配置并将路由名称去除(不传递到后台service)上述配置得到结果是请求的接口/foo和/bar不会传递到后台service。这个前提是要保证后台service中有对应的foo和bar路径。3、部分路由传递,其余的不匹配的不传递过去。4、部分路由传递,不匹配的不传递。5、同一配置不同路由路径配置。_nginx.ingress.kubernetes.io

[51单片机]单片机定时器与串口通信-程序员宅基地

文章浏览阅读837次,点赞14次,收藏8次。通过此次学习51单片机单片机定时器与串口通信的相关内容,掌握了单片机定时器与串口通信的使用方法,了解了如何利用单片机定时器与串口来实现对外部事件的实时控制,还学习了单片机定时器与串口的工作原理和编程方法,掌握了如何利用定时器来实现时间精确控制,提高了系统的时间管理能力。了解了单片机定时器与串口的工作机制,学会了合理设置定时器的工作参数,从而能够有效地节省系统资源,提高系统的性能和效率。

随便推点

实战详解docker安装步骤——Linux操作系统(CentOS7.9)下安装容器技术docker引擎_配置国内docker的yum源-程序员宅基地

文章浏览阅读662次。实战详解docker安装步骤——Linux操作系统(CentOS7.9)下安装容器技术docker引擎_配置国内docker的yum源

Android 应用开发项目中如何使用线程 Bezier 曲线?_android bezier(0.33,0,0.67,1.00)-程序员宅基地

文章浏览阅读117次。贝塞尔曲线(Bézier curve),又称贝兹曲线或贝济埃曲线,是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线,贝兹曲线由线段与节点组成,节点是可拖动的支点,线段像可伸缩的皮筋,我们在绘图工具上看到的钢笔工具就是来做这种矢量曲线的。主要结构:起始点、终止点(也称锚点)、控制点。通过调整控制点,贝塞尔曲线的形状会发生变化。_android bezier(0.33,0,0.67,1.00)

浅谈新型高压开关配电室环境监测系统的设计-程序员宅基地

文章浏览阅读859次,点赞23次,收藏18次。系统采用西门子SIMATICS7-200系列可编程控制器(PLC)作为数据采集与控制的核心部件,昆仑通态触摸屏作为数据显示、存储部件,采用德国进口的红外吸收原理的SF6气体浓度传感器和日本进口的氧气含量传感器为主要部件,配上通讯、电源隔离、信号隔离、抗电磁干扰等电路,组成SF6浓度/氧气含量复合传感器,使传感器具有检测精度高、稳定性好、抗于扰能力强、维护方便等优点,采用RS485总线输出,使系统扩充更为容易,完全能够满足现场各项要求。温湿度变送器设置方法与SF6/02变送器的设置方法相同。

cocktail with pony-程序员宅基地

文章浏览阅读290次。题目大意在一维数轴上,狼的起始位置是x1x_1x1​,马的起始位置的x2x_2x2​ 。每轮狼移动v1v_1v1​步,小马移动v2v_2v2​ 步,每一步都可以向左或者向右移动。狼和马轮流先移动,第一轮狼先动,第二轮马先动。如果两个动物位置相同,那么马被抓住。移动不能超过数轴n的长度代码#include <iostream>using namespace std;int n,v1,v2,x1,x2;// 模拟int main(){ int t; cin >>_cocktail with pony

Glide缓存导致图片不更新_glide url不变,图片更新 缓存问题-程序员宅基地

文章浏览阅读6.6k次,点赞3次,收藏9次。Glide是一个非常好用的图片加载框架,它可以很好的缓存图片以提高图片加载效率。 但是在使用的时候,会出现一个问题:当服务器图片资源已经更新,但是URL地址不变时,Glide不会重新加载URL,而是从缓存中读取旧的图片资源。 下面给出两种解决方式: 1、仅使当前网络加载为服务器新数据——治标,一次性: 此方法关键在于指定Re..._glide url不变,图片更新 缓存问题

基于蚁群算法的机器人栅格地图路径规划_蚁群算法在机器人路径规划-程序员宅基地

文章浏览阅读1.2k次。请注意,上述代码中的一些函数需要根据具体的问题和地图定义进行实现,例如加载栅格地图数据、初始化蚂蚁位置、计算概率、选择下一个移动位置、更新信息素、找到最佳路径等。在本篇文章中,我们将介绍如何使用蚁群算法来解决机器人在栅格地图上的路径规划问题,并提供相应的 MATLAB 代码实现。在每个迭代步骤中,蚂蚁根据当前位置、信息素和启发函数计算下一步移动的概率,并根据概率选择下一步的移动位置。然后,更新路径和位置,并根据蚂蚁的路径更新信息素。在每次迭代结束后,我们找到最佳路径,并根据信息素蒸发率更新信息素。_蚁群算法在机器人路径规划

推荐文章

热门文章

相关标签