微信小程序超长页面生成截图的一种解决方案

需求

用户在页面填写信息和签字后要把当前页面的信息截图生成图片保存。

技术实现难点

  1. 页面长度特别长,多屏才能显示完全,生成的图片的长度特别长。
  2. 页面内容复杂,内容中包含了大量文本、大量图片。
  3. 页面源码使用了大量自定义组件。

常见技术方案

1、使用官方推荐的扩展组件:wxml-to-canvas

  • 优点:经过大量项目实践,官方推荐,比较稳定。
  • 缺点:需要手动拼接wxml,wxss,只适用于内容简单、内容量少的图片生成,比如海报。不支持自定义组件。

2、服务器端生成图片

  • 优点:摆脱小程序束缚,节省小程序端开发工作量
  • 缺点:损耗服务器性能,服务器压力大,图片生成能力有限。

在这个需求中显然上面两种方案都不太理想,甚至无法使用。小程序没有提供截图功能更不要说长截图功能。基于小程序现有的能力是实现不了了,只能自己寻找其他解决方案。

实现原理

在web端有很多把页面转为图片的工具库,能不能利用这些工具库或者移植到小程序上呢?

微信小程序底层虽然也是遵循web标准的,可是它自行实现了一套开发语言标准,这使得移植很难达成。让人感到欣慰的是微信小程序提供了webview组件以承载web页面。有了这个组件就可以借助web页面做很多事情了。该方案的实现正是基于这一个组件。

该方案的实现思路:小程序页面通过webview组件加载H5页面,然后在H5页面中引入html2canvas,利用html2canvas实现HTML到canvas的转换,再把canvas转换为图片进行上

你可能感兴趣的:(微信小程序最佳实践,小程序,截图,html2canvas)