快速解决Canvas.toDataURL 图片跨域的问题


Posted in Javascript onMay 10, 2016

如题,在将页面的图片地址进行本地输出时(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 图片跨域的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 中的replace方法说明
Apr 13 Javascript
jquery 经典动画菜单效果代码
Jan 26 Javascript
javascript 常用功能总结
Mar 18 Javascript
一款基jquery超炫的动画导航菜单可响应单击事件
Nov 02 Javascript
js如何准确获取当前页面url网址信息
Sep 13 Javascript
老生常谈JavaScript 函数表达式
Sep 01 Javascript
JavaScript实现时间表动态效果
Jul 15 Javascript
vue结合axios与后端进行ajax交互的方法
Jul 06 Javascript
webpack4 入门最简单的例子介绍
Sep 05 Javascript
vue-cli 脚手架基于Nightwatch的端到端测试环境的过程
Sep 30 Javascript
Vue源码解析之数据响应系统的使用
Apr 24 Javascript
JS数据类型(基本数据类型、引用数据类型)及堆和栈的区别分析
Mar 04 Javascript
jQuery事件的绑定、触发、及监听方法简单说明
May 10 #Javascript
网页前端登录js按Enter回车键实现登陆的两种方法
May 10 #Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【二】
May 10 #Javascript
JS实现登录页面记住密码和enter键登录方法推荐
May 10 #Javascript
详解JavaScript中的自定义事件编写
May 10 #Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
May 10 #Javascript
JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】
May 10 #Javascript
You might like
透析PHP的配置文件php.ini
2006/10/09 PHP
20个PHP常用类库小结
2011/09/11 PHP
PHP UTF8中文字符截断函数代码
2012/09/11 PHP
php笔记之:文章中图片处理的使用
2013/04/26 PHP
php Hex RGB颜色值互换的使用
2013/05/10 PHP
修改yii2.0用户登录使用的user表为其它的表实现方法(推荐)
2017/08/01 PHP
PHP 实现重载
2021/03/09 PHP
ASP中用Join和Array,可以加快字符连接速度的代码
2007/08/22 Javascript
Div自动滚动到末尾的代码
2008/10/26 Javascript
Dom操作之兼容技巧分享
2011/09/20 Javascript
通过jQuery源码学习javascript(三)
2012/12/27 Javascript
jQuery实现 注册时选择阅读条款 左右移动
2013/04/11 Javascript
jquery实现输入框动态增减的实例代码
2013/07/14 Javascript
Javascript封装DOMContentLoaded事件实例
2014/06/12 Javascript
javascript实现瀑布流自适应遇到的问题及解决方案
2015/01/28 Javascript
jQuery form插件之formDdata参数校验表单及验证后提交
2016/01/23 Javascript
nodejs实例解析(输出hello world)
2017/01/03 NodeJs
js实现年月日表单三级联动
2020/04/17 Javascript
ReactNative短信验证码倒计时控件的实现代码
2017/07/20 Javascript
layui table 复选框跳页后再回来保持原来选中的状态示例
2019/10/26 Javascript
pandas 实现将重复表格去重,并重新转换为表格的方法
2018/04/18 Python
10个Python小技巧你值得拥有
2018/09/29 Python
python 利用pyttsx3文字转语音过程详解
2019/09/25 Python
python不使用for计算两组、多个矩形两两间的iou方式
2020/01/18 Python
Python爬虫爬取、解析数据操作示例
2020/03/27 Python
python 双循环遍历list 变量判断代码
2020/05/04 Python
快速了解Python开发环境Spyder
2020/06/29 Python
python 8种必备的gui库
2020/08/27 Python
详解如何用HTML5 Canvas API控制图片的缩放变换
2016/03/22 HTML / CSS
新加坡网上花店:FlowerAdvisor新加坡
2018/10/05 全球购物
行政助理的职责
2013/11/14 职场文书
《傅雷家书》教学反思
2014/04/20 职场文书
房屋维修申请报告
2015/05/18 职场文书
RPM包方式安装Oracle21c的方法详解
2021/08/23 Oracle
详解JavaScript中Arguments对象用途
2021/08/30 Javascript
kubernetes集群搭建Zabbix监控平台的详细过程
2022/07/07 Servers