求助,哪位大神知道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背景图无法截取并跨域

html2canvas 跨域代理怎么实现

canvas2html 遇到的跨域问题

使用html2Canvas生成图片跨域如何处理?

请问哪位大神知道为啥Dreamweaver 新建HTML,插入图像的时候更改源文件地址,图片会变模糊?

html2canvas 截取 html 生成图片空白问题