html2Canvas踩屎日记

图像不清晰?

1. scale设置成了2或者完全就没加这玩意,scale: 4应该能解决问题.并不是值越大越好,有上限的，大于这个值是没法继续提升清晰度的；越大会导致base64图片越大,微信识别二维码等操作会很耗时间（这个有待确认）。
2. dpi: window.devicePixelRatio和scale混用是有问题的。
3. 我尝试过很多方式，貌似无法还原到100%原图的，我只能达到90%左右。

渲染出来的一直是一片空白?

1. 多数情况是跨域了,useCORS: true,就好了.还是跨域的话把后端打一顿就好了.
2. 图片太小了,小于10kb的本地图片在iOS上是一片空白的,在base64阶段就已经是空白的了.如果实在是穷的不到10kb, 换成url版本的图片试试吧.
3. 被渲染的元素之前是invisible不可见的,这种情况就只能用transform: translateX(10000px),然后再tansform: translate(-50%, -50%)回来就好了。

偶发性出现渲染空白?

1. 目测是采用了

import XXX from "./images/XXX.png"  
<img src={XXX} />

这种本地图片的方式,在iOS上会出现偶发性空白现象,获取后端接口图片url,插入src中就能解决问题; 当有本地图片和url图片混合的时候特别容易出现这种问题.

2. 不要重复渲染图片，重复性的合成图片会导致在iOS上渲染局部失效问题。

图像错位?

1. 很正常,我也经常遇到,习惯就好,土办法就是手动复位,几种常见位移.

html2canvas(targetEle,
            {
                width: canWidth+100,
                height: canHeight-100,
                y: targetEle.offsetTop,
            })

2. 一些css属性在html2canvas中是不支持,建议查文档了解一下http://html2canvas.hertzen.com/features
3. 还有一种情况出现在你页面向下滑动的时候，你的容器或者容器父节点使用了fixed定位，这时候就需要加scrollY: 0,就好了,同理scrollX.

排除某些DOM元素?

1. 给需要被排除的元素添加 data-html2canvas-ignore='true'属性就行了,文档里面也有 http://html2canvas.hertzen.com/configuration

相关链接

html2canvas踩坑记录

I believe your apartment is on fire