html2canvas踩坑记

关键字： 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选项确实还是给笔者留下了深深的困惑，因此记录下来，警示后者。