关键字： 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, 通过 <img> 加载的图片，浏览器默认情况下会将其缓存起来。
2, 当我们从 JS 的代码中创建的 <img> 再去访问同一个图片时，浏览器就不会再发起新的请求，而是直接访问缓存的图片。但是由于 JS 中的 <img> 设置了 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 的 <img> 正常的请求到了图片。
不过，浏览器为何会多次发起本来不支持cors的图片资源，且成功的访问到了资源，disable cache选项确实还是给笔者留下了深深的困惑，因此记录下来，警示后者。
