快速解决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_02_理解undefined和null
Oct 11 Javascript
javascript中的if语句使用介绍
Nov 20 Javascript
从数据库读取数据后将其输出成html标签的三种方法
Oct 13 Javascript
每天一篇javascript学习小结(基础知识)
Nov 10 Javascript
JS与jQuery实现隔行变色的方法
Sep 09 Javascript
web前端开发upload上传头像js示例代码
Oct 22 Javascript
浅谈JS验证表单文本域输入空格的问题
Feb 14 Javascript
详解基于webpack和vue.js搭建开发环境
Apr 05 Javascript
bootstrap日期控件问题(双日期、清空等问题解决)
Apr 19 Javascript
Vue.js实现图片的随意拖动方法
Mar 08 Javascript
Node.js API详解之 net模块实例分析
May 18 Javascript
详解ES6 扩展运算符的使用与注意事项
Nov 12 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
Zerg基本策略
2020/03/14 星际争霸
Php output buffering缓存及程序缓存深入解析
2013/07/15 PHP
6个DIV 135或246间隔一秒轮番显示效果
2010/07/24 Javascript
js null,undefined,字符串小结
2010/08/21 Javascript
图片延迟加载的实现代码(模仿懒惰)
2013/03/29 Javascript
原生JS实现LOADING效果
2015/03/16 Javascript
JavaScript获取网页表单action属性的方法
2015/04/02 Javascript
jquery 表单验证之通过 class验证表单不为空
2015/11/02 Javascript
AngularJS基础 ng-keypress 指令简单示例
2016/08/02 Javascript
原生JS实现的放大镜效果实例代码
2016/10/15 Javascript
jquery实现转盘抽奖功能
2017/01/06 Javascript
详谈$.data()的用法和作用
2017/02/13 Javascript
jQuery简单绑定单个事件的方法示例
2017/06/10 jQuery
详解Vue 2.0封装axios笔记
2017/06/22 Javascript
解决低版本的浏览器不支持es6的import问题
2018/03/09 Javascript
详解vue-cli3多环境打包配置
2019/03/28 Javascript
layui自己添加图片按钮并点击跳转页面的例子
2019/09/14 Javascript
浅谈django中的认证与登录
2016/10/31 Python
详解python 拆包可迭代数据如tuple, list
2017/12/29 Python
python环境路径配置以及命令行运行脚本
2019/04/02 Python
使用Python实现企业微信的自动打卡功能
2019/04/30 Python
搭建python django虚拟环境完整步骤详解
2019/07/08 Python
Python ini文件常用操作方法解析
2020/04/26 Python
英国儿童设计师服装的领先零售商:Base
2019/03/17 全球购物
澳大利亚最大的在线美发和美容零售商之一:My Hair Care & Beauty
2019/08/24 全球购物
Stio官网:男女、儿童户外服装
2019/12/13 全球购物
写自荐信三大法宝
2014/01/24 职场文书
水利公司纪检监察自我鉴定
2014/02/25 职场文书
企业演讲稿范文大全
2014/05/20 职场文书
作风整顿剖析材料
2014/09/30 职场文书
2015年教师教学工作总结
2015/04/28 职场文书
学雷锋广播稿大全
2015/08/19 职场文书
多属性、多分类MySQL模式设计
2021/04/05 MySQL
python解决12306登录验证码的实现
2021/04/18 Python
Python 数据可视化之Bokeh详解
2021/11/02 Python
如何解决php-fpm启动不了问题
2021/11/17 PHP