当前位置: 首页 > 工具软件 > html2canvas > 使用案例 >

html2canvas协议慢,html2canvas踩坑记

蓬威
2023-12-01

关键字: Access-Control-Allow-Origin  disable cache

一、版本选择https://github.com/niklasvh/html2canvas

笔者写文章时,html2canvas最新版本是v1.0.0-rc.5,但是使用过程中采用的版本是1.0.0-alpha.9。原因是在 v1.0.0-rc.0开始,ios8的机器下,如果截屏区域中有base64格式的图片时,会出现error loading images的错误。为了兼容该机器,采用了较低版本。

二、白屏问题

相信大家都知道,html2canvas使用过程中经常遇到白屏问题,大致有几种:1、部分css3样式不支持;

2、截屏时目标区域有部分不在可视区域中;

3、截屏部分中的图片资源加载失败导致的白屏;(此类解决方案可参考我另一篇文章中关于Blob的讲解https://www.jianshu.com/p/7e2a4b88e7ca)

4、图片资源跨域

这里想阐述的是第4种跨域导致的白屏,其实解决方法很简单,只不过这里想写写整个过程中遇到的诡异现象。

首先,访问跨域图片资源,以下参数很重要:useCORS: true;但这只是客户端的设置,重要的是服务端要支持cors。html2canvas({ useCORS: true })

大家知道,html2canvas截图时,无论截图区域中的图片是否加载完成,都会重新加载图片,从浏览器缓存机制来看:

1, 通过 加载的图片,浏览器默认情况下会将其缓存起来。

2, 当我们从 JS 的代码中创建的 再去访问同一个图片时,浏览器就不会再发起新的请求,而是直接访问缓存的图片。但是由于 JS 中的 设置了 crossorigin,也就意味着它将要以 CORS 的方式请求,但缓存中的图片并未设置crossorigin,所以浏览器直接就拒绝了。连网络请求都没有发起。控制台报跨域。

但在笔者的调试过程中,在本地浏览器(浏览器并未强制跨域)使用html2canvas截图时,却并未报图片跨域,这让笔者十分困惑。浏览器加载跨域的图片资源时,响应头中参数为:Access-Control-Allow-Credentials:true

Access-Control-Allow-Origin:0

图片按理说应该被跨域限制无法加载成功,但神奇的是,浏览器重新又加载了一次该资源,此时响应头中的参数变为了:Access-Control-Allow-Credentials:true

Access-Control-Allow-Origin: true

what?

然鹅,在测试环境中,图片资源只会加载一次,便直接报跨域的错。

经笔者仔细观察,才发现原来在本地的chrome浏览器的network面板中,默认勾选了disable cache 选项。从我们上面的分析中的第2点来看,此时浏览器不访问缓存,浏览器重新发起了请求并且 JS 的 正常的请求到了图片。

不过,浏览器为何会多次发起本来不支持cors的图片资源,且成功的访问到了资源,disable cache选项确实还是给笔者留下了深深的困惑,因此记录下来,警示后者。

 类似资料: