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

最近接到一个需要,须要在小程序中实现页面截图,我一开始的思考是应用官网提供的扩大组件wxml-to-canvas,然而理论体验下来成果很蹩脚,首先它并不能截取理论的页面,而是必须传入wxmlwxss;而后他能反对的成果也很少,并不能满足需要中略微简单的成果。最终我决定用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标签展现的图片清晰度远远高于背景图片。

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据