解决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 ...
随机推荐
- jQuery学习笔记(一)
1.什么是jQuery? jQuery是一个JavaScript函数库. jQuery是一个轻量级的"写的少,做的多"的JavaScript库. 2.为什么要使用jQuery? 目 ...
- ios label上显示特殊字符 % "
今天在label上显示一个拼接的百分比 label.text = [NSString stringWithFormater:@"%d%",i]; 结果后面的%就是报错,然后查半天也 ...
- javascript (js)判断手机号码中国移动、中国联通、中国电信
我国使用的手机号码为11位,其中各段有不同的编码方向:前3位———网络识别号:第4-7位———地区编码:第8-11位———用户号码. 中国移动134.135.136.137.138.139.150.1 ...
- ES6初学习
建议下一个chrome的插件Scratch.js[https://chrome.google.com/webstore/detail/alploljligeomonipppgaahpkenfnfkn] ...
- 清除oracle中的缓存(具体细节未知, 慎用)
oracle中的缓存主要是指SGA中的:1.share pool2.database buffer cache清空命令如下:首先要登录到sqlplus命令下,输入如下命令即可:SQL> alte ...
- 记一次TFS 的 垃圾提示(无法下载 未获取项目 的 代码)
提示 “ 所有文件都是最新的 ”,但是在 源码管理 里面 确是 “未下载” 我艹,第一次遇到.如图.~~ 最后发现是 TFS 的项目权限设置问题. 你妈个马批的,啥子鸡巴破B提示,太阳你妈B 的 .要 ...
- Winform主窗体设计
主窗体顶部为菜单按钮,子窗体内嵌入Panel显示 界面如下: 第二步,主窗体离不开的几个方法 1,点击菜单功能,加载子窗体 private void btnOpenForm_Click(object ...
- VMware克隆SUSE网卡配置
1.配置DNS vim /etc/resolv.conf domain sitenameserver 202.98.0.682.配置网关 vim /etc/sysconfig/network/rout ...
- Httpoxy远程代理感染漏洞 [转]
Httpoxy是一个最新曝出的一个CGI程序漏洞,它主要可能威胁到运行在CGI上的PHP,Go,Python和其他代码程序语言. 0×01 什么是httpoxy? 具体来说, httpoxy是一组影 ...
- SQL联合更新(只要有关联字段就能执行更新!)
update t1 set KCLX=t2.KCLX,KSFS=t2.KSFS from JX_PlannedCourse t1 inner join JX_Course t2 on t1.KCDM= ...