解决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 图片跨域问题的更多相关文章
- 快速解决Canvas.toDataURL 图片跨域的问题
出现Canvas.toDataURL 图片跨域问题怎么解决呢?下面小编就为大家带来一篇Canvas.toDataURL 图片跨域问题的快速解决方法.一起跟随小编过来看看吧 如题,在将页面的图片地址进行 ...
- canvas.toDataURL 由于跨域报错的解决方法
关于canvas.toDataURL 由于跨域报错的解决方法 用过canvas,都知道toDataURL这个方法真好用,不仅合成图片用到它,压缩图片也用到它.但有一个问题,就是图片源不能跨域,不然会报 ...
- html2canvas - 解决办法之图片跨域导致的截图空白
1. 后端支持:图片要是cdn上的地址,并且允许图片跨域,header头中设置应为 Access-Control-Allow-Origin: * 2. 前端配置 var opts = { scale ...
- Access to Image at 'file:///Users canvas本地图片跨域报错解决方案
1.设置跨域 添加跨域条件 crossorigin="anonymous" 前提是后端支持这个图片跨域 2.上面加了之后还是报错 如标题所示 你需要把你的项目放到服务器上面跑 ...
- canvas 使用图片跨域问题
项目中需要生成海报,使用了前端生成图片的插件,将背景图,详情图,以及部分的文字说明放在一块并且生成一张新的图片,大体看了一下源码是通过canvas来实现的,在本地的时候完全没有问题,提交到服务器之后就 ...
- 解决 canvas 将图片转为base64报错: Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasEleme...
问题描述 当用户点击分享按钮时,生成一张海报,可以保存图片分享到朋友圈,用户的图片是存储在阿里云的OSS,当海报完成后,执行.canvas.toDataURL("image/png" ...
- h5标签canvas关于getImageData跨域的问题
h5标签canvas关于getImageData跨域的问题 在学习h5的时候,canvas标签中getImageData()报错:security error! 具体代码如下(chrome浏览器): ...
- 解决阿里云OSS跨域问题
解决阿里云OSS跨域问题 现象 本人项目中对阿里云图片请求进行了两次,第一次通过img标签进行,第二次通过异步加载获取.第一次请求到图片,浏览器会进行缓存,随后再进行异步请求,保存跨域失效. 错误信息 ...
- Vue-cli proxyTable 解决开发环境的跨域问题
Vue-cli proxyTable 解决开发环境的跨域问题 proxyTable: { '/list': { target: 'http://api.xxxxxxxx.com', pathRewri ...
随机推荐
- UML大战需求分析阅读笔记2
全面深入理解客户的业务,才能帮助我们准确的把握客户的需要.而在理解客户业务的同时,我们往往需要做业务流程再造(BPR:Business Process Reengineering)的工作.BPR简单说 ...
- Altium Designer XX 重新定义板框形状和大小的方法
Altium Designer15 重新定义板框形状和大小的方法:重新定义板框形状和大小的方法.很简单,点击数字键"1",就会看到板框界面变绿了这时候你在去点击菜单栏里的Desig ...
- Java线程基础实例
概述 Java线程是一个在实战开发中经常使用的基础功能,而在Java中线程相关的类在java.lang和java.util.concurrent里 Thread package thread.base ...
- 如何把apdu[decode_len]打印出来
memcpy(data, &apdu[decode_len], apdu_len - decode_len); int i = 0; for(i=0;i<apdu_len;i ...
- ArcMap 操作笔记
1.SQL查询(in) select * from table where PointID in ('1','2')
- ios第三方库和工具类
下面的是使用苹果电脑后,自己的一下积累吧.有好用的第三方库和工具,肯定会第一时间和大家分享的. 自己平时写的一些分类和工具库 SSTools已经在github上面开始更新了,欢迎大家来指正和补充 一. ...
- git入门操作命令(转载)
以下为git环境搭建: 先建用户-->建组-->用户添加到组 新建项目,命名空间选择组 项目建完后,会分配远端地址. 然后本地配置好远端地址后,提交代码. 设置用户,邮箱 git ...
- python实验一:画图
题目:画图,学用rectangle画方形. rectangle(int left, int top, int right, int bottom) 参数说明:(left ,top )为矩形的左上坐标, ...
- python ide ---wing 注册机
注册机脚本代码如下: import sha import string BASE2 = '01' BASE10 = '0123456789' BASE16 = '0123456789ABCDEF' B ...
- Android内部自带的SQLite数据库操作dos命令
1:什么叫做SQLite数据库 Android系统内核是Linux系统,Android系统很特殊,他自带了一个SQLite数据库,轻量型的一款嵌入式的数据库 它占用资源非常的低,在嵌入式设备中,可能只 ...