uniapp移动app实现将网页保存为图片到手机相册

项目中新增了一个需求,将页面保存为图片,且保存在相册中。

Android端

运用到的技术点

  1. html2canvas:将网页绘制base64的图片

  1. plus.nativeObj.Bitmap:下载base64的png图片,临时存放起来

  1. uni.saveImageToPhotosAlbum:将临时存放的png图片,存放到手机相册

  1. plus.io.resolveLocalFileSystemURL:删除临时存放的图片

运用

  1. 安装html2canvas

npm install html2canvas
  1. 因为html2canvas要进行dom操作,所以我们得使用renderjs。script就要分为两部分,一个是纯的script标签块,一个是带有module、lang的script标签块

  1. 两个script块之间的通信

ownerInstance.callMethod
  1. 配置android的写入权限

android.permission.WRITE_EXTERNAL_STORAGE
  1. 开始写代码了~








参考文档:

https://www.html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.Bitmap

https://uniapp.dcloud.net.cn/api/media/image.html#saveimagetophotosalbum

https://html2canvas.hertzen.com/documentation

源码链接:

https://download.csdn.net/download/weixin_42959829/87416296

你可能感兴趣的:(uniapp,uni-app)