问题：用html2canvas生成画布图片，再转成pdf。生成图片时内容结构里的图片显示空白。 解决： 首先服务器设置图片允许跨域，如阿里云腾讯云配置跨域规则。其次图片设置crossOrigin=“anonymous”，并且拿到图片地址加随机参数如 src +‘?v=’ + Math.random()防止使用缓存,再者html2canvas设置属性useCORS, allowTaint为true。

下列文章来源该篇

html2canvas库的工作原理并不是真正的“截图”，而是读取网页上的目标DOM节点的信息来绘制canvas，所以它并不支持所有的css属性。

前提是外部图片允许跨域，需要服务器设置

以nginx为例，response-header内要存在Access-Control-Allow-Orgin:xxxx(可以是*,安全性要求比较高的可以根据主域名自定义)，如果该资源所在的web-server是不支持跨域的，保存图片是不会成功的。

img标签设置跨域

当html2canvas中生成的截图中包含外部图片，那么外部图片在引入的时候就需要设置允许跨域。

另外，通过 ‘img’ 加载的图片，浏览器默认情况下会将其缓存起来，在canvas中用到图片时，就会直接使用缓存图片，不会再重新发请求。又因为浏览器本身不会有跨域问题，所以如果‘img’没有设置 crossorigin 属性，那么就会出现跨域问题，图片不能再次被复用到 canvas 上去的。

这是最简单的方法，让图片可以复用到canvas上。

浏览器设置 disable cache，这种方法需要设置浏览器属性，不推荐。

这种方法能避免使用图片缓存，在开发过程中，使用js方式请求图片资源，最好每一次都加个随机数，以保证源都是最新的，不走缓存。

};

使用外部图片就会面临跨域的问题，html2canvas也需要设置属性。

使用上面两种方法就可以让外部图片显示在画布上，虽然方法2可以让外部图片显示在画布上，但是却不能调用 toBlob(), toDataURL() 或 getImageData() 方法，调用它们会抛出安全错误。

可能是使用缓存图片，有以下解决方法

如果是出现了空白，那有可能是转成图片的部分出现滚动条且是在弹窗中展示，需要设置相关滚动高度。 或者有可能是dom不对，请保证dom是要截图那个元素的父元素

这个有可能是浏览器缓存导致了，可以试试重新加载资源，也可以在资源的请求路径后加上时间戳重新加载。