求助,哪位大神知道html2canva 有跨域图片,怎么解决
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了求助,哪位大神知道html2canva 有跨域图片,怎么解决相关的知识,希望对你有一定的参考价值。
参考技术A 不知道怎么玩吧,我来告诉你,所谓跨域肯定是图片跨域,截屏的时候有问题,
图片跨域怎么办?
把页面里的图片先转成base64设置给图片src属性,
全部都转了,再执行html2canvas截屏,这时候就可以显示图片了,
如果你嫌页面里的图片base64以后没原来清晰,那就转完再恢复链接就可以,
这就是我处理的办法~~~
为什么会有跨域的问题出现,如何解决跨域问题
为什么会有跨域的问题出现,如何解决跨域问题
什么是跨域
定义: 跨域是指a页面想获取b页面资源,如果a、b页面的协议、域名、端口、子域名不同,所进行的访问行动都是跨域的,而浏览器为了安全问题一般都限制了跨域访问,也就是不允许跨域请求资源。注意:跨域限制访问,其实是浏览器的限制
。理解这一点很重要!!!
指的是浏览器不能执行其他网站的脚本,它是由浏览器的同源策略造成的,是浏览器对
javascript
施加的安全限制,防止他人恶意攻击网站.
比如一个黑客,他利用 iframe
把真正的银行登录页面嵌到他的页面上,当你使用真实的用户
名和密码登录时,如果没有同源限制,他的页面就可以通过 JavaScript 读取到你的表单中输
入的内容,这样用户名和密码就轻松到手了。
什么是同源策略
同源策略 是客户端脚本(尤其是 Javascript)的重要的安全度量标准。它最早出自 Netscape
Navigator2.0,其目的是防止某个文档或脚本从多个不同源装载。所谓同源指的是:协议,
域名,端口相同,同源策略是一种安全协议,指一段脚本只能读取来自同一来源的窗口和
文档的属性
解决方式
1、jsonp
1.1)去创建一个 script 标签
1.2)script 的 src 属性设置接口地址
1.3)接口参数,必须要带一个自定义函数名 要不然后台无法返回数据。
1.4)通过定义函数名去接收后台返回数据
//去创建一个 script 标签
var script = document.createElement("script");
//script 的 src 属性设置接口地址 并带一个 callback 回调函数名称
script.src = "HTTP://127.0.0.1:8888/index.php?callback=jsonpCallback";
//插入到页面
document.head.appendChild(script);
//通过定义函数名去接收后台返回数据
function jsonpCallback(data){
//注意 jsonp 返回的数据是 json 对象可以直接使用 //Ajax 取得数据是 json 字符串需要转换成 json 对象才可以使用。
}
2、 CORS:跨域资源共享
原理:服务器设置 Access-Control-Allow-OriginHTTP 响应头之后,浏览器将会允许跨域请求
限制:浏览器需要支持 HTML5,可以支持 POST,PUT 等方法兼容 ie9 以上,需要后台设置
2.1)跨域请求后的响应头中需要设置
2.2)Access-Control-Allow-Origin 为发起请求的主机地址
2.3)Access-Control-Allow-Credentials,当它被设置为 true 时,允许跨域带 cookie,但此时 Access-Control- Allow-Origin 不能为通配符*
2.4)Access-Control-Allow-Headers,设置跨域请求允许的请求头
2.5)Access-Control-Allow-Methods,设置跨域请求允许的请求方式
Access-Control-Allow-Origin: * //允许所有域名访问,或者
Access-Control-Allow-Origin: HTTP://a.com //只允许所有域名访问
3、反向代理
3.1)使用 vue-cli 脚手架搭建项目时 proxyTable 解决跨域问题
//打开 config/index.js,在 proxyTable 中添写如下代码:
//会拦截到/api的请求代理到目标服务器 http://f.apiplus.cn/xxx
proxyTable: {
'/api':{
target: 'http://f.apiplus.cn', //目标服务器地址
changeOrigin: true, //改变源,是否跨域
pathRewrite: {
'^/api': '/xxx' //路径重写,重定向
}
}
}
4.window+iframe
需要目标服务器响应window.name
5.nginx反向代理解决跨域问题
找到nginx的配置文件“nginx.conf”,修改一下信息.
server {
listen 80; #监听80端口,可以改成其他端口
server_name localhost; # 当前服务的域名
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
proxy_pass http://localhost:81;
proxy_redirect default;
}
location /apis { #添加访问目录为/apis的代理配置
rewrite ^/apis/(.*)$ /$1 break;
proxy_pass http://localhost:82;
}
#以下配置省略
配置解释:
1.由配置信息可知,我们让nginx监听localhost的80端口,网站A与网站B的访问都是经过localhost的80端口进行访问。
2.我们特殊配置了一个“/apis”目录的访问,并且对url执行了重写,最后使以“/apis”开头的地址都转到“http://localhost:82”进行处理。
3.rewrite ^/apis/(.*)$ /$1 break;
代表重写拦截进来的请求,并且只能对域名后边以“/apis”开头的起作用,例如www.a.com/apis/msg?x=1重写。只对/apis重写。
rewrite后面的参数是一个简单的正则 ^/apis/(.*)$ ,$1代表正则中的第一个(),$2代表第二个()的值,以此类推。
break代表匹配一个之后停止匹配。
以上是关于求助,哪位大神知道html2canva 有跨域图片,怎么解决的主要内容,如果未能解决你的问题,请参考以下文章
解决-使用html2canvas截取页面时,页面的div背景图无法截取并跨域