html2canvas.min.js 截图 多行文字错位 ；截图不全不完整

在帮助组员解决问题中记录使用过程中遇到的问题：

1. iOS 系统上 截图生成的海报 文字分享出去之后 文字会错位

这个是html2canvas 对中文支持的问题

html 文件:

 <div id="poster">
                <div class="content">
                    <p class="title">啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
                </div>
            </div>

解决方式：

对字符串进行循环放进span 里面

let popTitleEl = $('#poster .title')
                    let popTitleArr = (popTitleEl[0]).textContent.split('')
                    let fragment = document.createDocumentFragment('#poster .title')
                    popTitleArr.forEach(function (item) {
                        if (item != ' ' && item != '\n' && item != '') {
                            let span = document.createElement('span')
                            span.innerHTML = item
                            fragment.append(span)
                        }
                    })
                    popTitleEl.html(fragment)

这样分享就不会产生错位：

2. 弹窗过长 截图不全

在需要截图的元素外面再包一层，设置外层的overflow:auto, 此时就会截取完整弹窗

<div class="modal">
   xxxxxx 内容需要滑动展示
</div>

本来overflow: auto 加到.modal上
截取导致只能截取到可视区域图片

所以需要再外面再包一层，设置外层的overflow: auto

<div class="modalWrap">
<div class="modal">
   xxxxxx 内容需要滑动展示
</div>
</div>

let imgHeight = window.document.querySelector('.modal').offsetHeight // 获取DOM高度
    let imgWidth = window.document.querySelector('.modal').offsetWidth // 获取DOM宽度
    let scale = window.devicePixelRatio // 获取设备像素比
    html2canvas(document.getElementByClassName("modal"), {
        useCORS: true,
        scale: scale,
        width: imgWidth,
        height: imgHeight
    }).then(function (canvas) {
        //生成base64图片数据
        var dataUrl = canvas.toDataURL();
    });

3. 截取的 图片中如果包含外链图片url 导致跨域, 需要设置useCors: true, 同时保证后端请求头设置了可跨域:

(比如项目中如果用的阿里云, 可以在阿里云的http了做下设置:  这样的话 请求头里面也会有

 文档地址：Features | html2canvas 

 github: