快速解决Canvas.toDataURL 图片跨域的问题
如题，在将页面的图片地址进行本地输出时（Html2Canvas.js），因不同源存在跨域问题，会出现toDataURL访问权限问题：
【Redirect at origin 'http://sub1.xx.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://sub2.xx.com' is therefore not allowed access.】
解决方案：
根据错误分析需要在控制头增加“Access-Control-Allow-Origin”，即允许访问源文件权限，那么我们对这个页面【注意是要输出页面的图片】这样处理：
var img = new Image; img.onload = myLoader; img.crossOrigin = 'anonymous'; //可选值：anonymous，* img.src = 'http://myurl.com/....';
或者是HTML中
<img src="" id="imgclcd" crossorigin="anonymous">
核心是请求头中包含了 Origin: "anonymous"或"*" 字段，响应头中就会附加上 Access-Control-Allow-Origin: * 字段，问题解决。
以上这篇快速解决Canvas.toDataURL 图片跨域的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了js笔试题-接收get请求参数，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，,需要的朋友可以参考下2019-06-06
关于JavaScript的URL.createObjectURL()的使用方法
这篇文章主要介绍了关于URL.createObjectURL()的使用方法,使用createObjectURL可以节省性能并更快速，只不过需要在不使用的情况下手动释放内存,还不清楚的朋友一起来看看吧2023-04-04
JavaScript初级教程(第五课续)...2007-04-04
主要包括对象的创建、对象属性的设置和查询、对象方法等等，整理如下，感兴趣的朋友可以参考下2013-10-10
Javascript Math ceil()、floor()、round()三个函数的区别
Round是四舍五入的。。。Ceiling是向上取整。。float是向下取整2010-03-03
JavaScript入门教程(5) js Screen屏幕对象
这是基本JavaScript的屏幕对象2009-01-01
这篇文章主要介绍了JavaScript中for循环的使用详解,是JS入门学习中的基础知识,需要的朋友可以参考下2015-06-06
JavaScript中prototype为对象添加属性的误区介绍
prototype为对象添加属性的的过程中有些误区，在本文将为大家详细介绍下，感兴趣的朋友可不要错过2013-10-10
这篇文章主要介绍了JavaScript中var关键字的使用,是JavaScript入门学习中的基础知识,需要的朋友可以参考下2015-08-08
js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
嵌套的div元素，如果父级和子元素都绑定了一些事件，那么在点击最内层子元素时可能会触发父级元素的事件，下面介绍一下js阻止默认事件与js阻止事件冒泡示例,大家参考使用吧2014-01-01
最新评论