微信小程序长截图功能

技术选型：

使用 webview + h5 + html2canvas

遇到问题

html2canvas 截图会有图片跨越问题:
测试可以转base64图片。
小程序内本地文件 webview测试问题：
hosts 更改ip指定某一个https地址比如：https://baidu.com
h5截图本地可以在webview中不行:
使用 wx.getFileSystemManager(); 文件管理器
h5点击下载长图传递到webview:
实现同级传参 先是参考 bindmessage 触发条件： 小程序后退、组件销毁、分享、复制链接
最终实现还是，wx.miniProgram.reLaunch 跳转当前页面从而实现传递base64

实战

h5

<div id="capture">
    截图内容
</div>
<button onclick="captureElement()">下载</button>

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<script src="./js/html2canvas.min.js"></script>
function captureElement() {
                let dateString = "121212";  //  下载图片文件名称
                setTimeout(() => {
                    const element = document.querySelector("#capture");  
                    let arr = {
                        allowTaint: true,
                        foreignObjectRendering: true,
                        scrollX:-window.scrollX,
                        scrollY:-window.scrollY,
                        windowWidth: document.documentElement.offsetWidth,
                        windowHeight: document.documentElement.offsetHeight
                    }
                    html2canvas(element,arr).then(canvas => {  
                        var imgs = canvas.toDataURL('image/png');
                        setTimeout(() => {
                        // 跳转指定页面
                            wx.miniProgram.redirectTo({url: "/pages/examining/examining?img="+imgs+""})
                        },500)
                        // 下面这些是为了能在浏览器中下载长图
                        var img = new Image();
                        img.src = canvas.toDataURL('image/png');
                        // 创建一个链接元素用于下载
                        var link = document.createElement('a');
                        link.href = imgs;
                        link.download = dateString+'.png'; // 下载的图片名称
                        link.click(); // 触发下载
                    });  
                }, 1000);
        }

webview

<web-view src="{{url}}"   bindload="load" ></web-view>

当再次进入这个页面的时候会拿到传递过来的base64

onLoad(options) {
    if (options.img) {
          wx.showLoading({ title: '加载中...',mask:true })
          this.downImg(options.img)
    }
}

downImg (fileData) {
    let dateString = 123456;  // 图片名称
    let fs = wx.getFileSystemManager(); //文件管理器
    fs.writeFile({
      filePath: wx.env.USER_DATA_PATH + `/${dateString}.png`,
      data: fileData.slice(22),
      encoding: 'base64',
      success: res => {
        wx.saveImageToPhotosAlbum({
          filePath: wx.env.USER_DATA_PATH + `/${dateString}.png`,
          success: function(res) {
            wx.showToast({
              title: '保存成功',
            })
            wx.hideLoading()
          },
          fail: function(err) {
            wx.showToast({
              title: '保存失败',
            })
            wx.hideLoading()
          }
        })
      },
      fail: err => {
         wx.hideLoading()
      }
    })
  },