关于小程序:小程序网页中实现页面截图

最近接到一个需要，须要在小程序中实现页面截图，我一开始的思考是应用官网提供的扩大组件 wxml-to-canvas，然而理论体验下来成果很蹩脚，首先它并不能截取理论的页面，而是必须传入 wxml 和wxss；而后他能反对的成果也很少，并不能满足需要中略微简单的成果。最终我决定用 web-view 加载的网页中应用 html2canvas 来实现性能。

网页局部我用了vue，首先须要装置html2canvas

npm install html2canvas

页面中引入

import html2canvas from 'html2canvas';

须要截图的 dom 节点上增加 ref 属性

<div ref="page">

截图代码

...
document.body.scrollTop = 0;
// 将页面滚动至顶部后再开始截图，能力保障截图的残缺
html2canvas(this.$refs.page, {
  allowTaint: false,
  useCORS: true,
  width: document.body.scrollWidth,
  height: document.body.scrollHeight
  // 理论体验中发现最好设置宽高为页面的宽高能力取得残缺的截图
}).then(canvas => {this.savedPic = canvas.toDataURL('images/png')
  // 用于在页面中展现的截图实现的网址
  ...
  // 以下代码为模仿 a 标签的点击间接下载截图
  // 然而这部分代码在挪动端网页和小程序中并不会失效
  let a = document.createElement('a'),
    blob = this.dataURLToBlob(canvas.toDataURL('images/png'));
  a.setAttribute('href', URL.createObjectURL(blob));
  a.setAttribute('download', 'pic.png');
  document.body.appendChild(a);
  a.click();
  URL.revokeObjectURL(blob);
  document.body.removeChild(a);
});
...

网页毕竟不是原生小程序，还是会存在一些兼容性问题，比方网页中不能应用小程序的 wx.saveImageToPhotosAlbum 间接保留生成好的截图。挪动端和微信中也不反对模仿 a 标签的点击来下载图片，最终只能通过展现生成的截图并提醒用户长按图片来实现保留图片的性能，用户体验会差点，然而思考到截图成果比 wxml-to-canvas 好太多了，还是能够承受的。

最初说一下 html2canvas 的反对度，目前理论用下来发现不反对的款式为暗影和伪元素 ，其余基本上都反对。网页中的图片必须为本地图片或者反对跨域的网络图片。用到图片的中央倡议间接应用img 标签，而不是背景图片，img标签展现的图片清晰度远远高于背景图片。

理论代码

兼容性