canvas2image 开发中遇到的问题

ios里，生成的图片不显示

canvas.toDataURL('image/jpeg', 1.0)

使用image/jpeg格式，在指定图片格式为 image/jpeg 或 image/webp的情况下，可以从 0 到 1 的区间内选择图片的质量。

canvas 是弹出层时，底层有滚动条，会有部分空白

测试的时候，好奇为啥每次，生成的图片都缺一部分，而且都是从顶部开始空白，再绘制图片。

解决方案: 添加绘制坐标y起始位置 y: window.pageYOffset,

html2canvas(target, {
    useCORS: true,
    y: window.pageYOffset,
}).then(...)

canvas 白屏终极解决方案

不考虑图片加载问题，大多是因为没找到绘制的位置的原因，会导致白屏黑屏的现象。
而且也会有改动 海报图布局的情况，经常会调位置，再遇见缩小海报图展示的需求，就要改动很多了，所以现在一般都是，把canvas定位到屏幕外面，然后绘制生成图片。对图片放大缩小就容易的多。

解决方案：

html2canvas(target, {
    useCORS: true,
    y: (window.pageYOffset + window.innerHeight),
}).then(...)

ios 生成图片时显示时不显的，大图几乎不显示。

猜测是图片渲染的原因，为了确保能够生成图片，生成图片写在了所有图片加载完成之后，才进行canvas绘制图片功能，但是还是有渲染不出来的情况。这个搜了很久，跨域 useCORS: true，也添加了。
Android是没有问题的。

然后搜了很多看到这么一段话：

原因跟html2canvas库的工作原理有很大的关系.html2canvas库需要我们先提供一段DOM节点，然后它再读取并解析这一段DOM节点生成canvas对象。如果DOM节点中已经使用了标签的话，它也会解析这个标签的src属性，然后重新创建一个Image对象，给它添加 crossOrigin="anonymous"属性后尝试以跨域的方式重新读取图片数据。需要注意的是，一般CDN上的图片都是带有缓存响应头并且会在浏览器端缓存的，而且缓存的不仅仅是图片数据，还有HTTP响应头。所以问题的根本原因我们就找到了，当html2canvas尝试以跨域的方式去读取图片数据时，它读取到的是浏览器的缓存数据，而且因为我们没有给DOM节点中的标签添加 crossorigin="anonymous"属性，所以缓存数据是不带Access-Control-Allow-Origin响应头的，进而导致html2canvas库读取到的图片数据污染了生成的canvas对象，最终致使canvas导出数据报错

所以我们要做的事情也很简单，就是给DOM节点中的每一个标签都加上crossorigin="anonymous"属性就可以了。

我这边暂时搞定了，但是看网上不少人说还有问题，也可能是我测试的机型少，这个问题还是需要关注一下。