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

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. 开始写代码了～

<template><view id="container"><view class="content"><view><text class="title">{{ title }}</text></view><button @click="canvasToImage.generateImage">保存图片</button></view></view>
</template><script>
export default {data() {return {title: 'Hello',}},mounted() {},methods: {getSaveImg(data) {// console.log('base64data', data);let base64data = data.base64data;let bitmap = new plus.nativeObj.Bitmap("test");bitmap.loadBase64Data(base64data, function () {console.log("加载Base64图片数据成功");let url = '_downloads/test2.png';bitmap.save(url, {}, function (i) {console.log('保存图片成功：' + JSON.stringify(i));// 保存图片到相册uni.saveImageToPhotosAlbum({filePath: url,success: function () {uni.showToast({title: '图片保存成功',icon: 'none'})// 图片保存成功后，将临时保存的图片删除plus.io.resolveLocalFileSystemURL(url,function (entry) {entry.getMetadata(function (metadata) {// console.log("fileCount=" + metadata.fileCount);entry.remove(); //删除单个文件 _downloads/改文件名});},function (error) {// uni.showToast({ title: "下载文件" });console.log("error" + error);});bitmap.clear()}});bitmap.clear();}, function (e) {onsole.log('保存图片失败：' + JSON.stringify(e));bitmap.clear();});}, function () {console.log('加载Base64图片数据失败：' + JSON.stringify(e));bitmap.clear();});},}
}
</script><script  module="canvasToImage" lang="renderjs">
import html2canvas from 'html2canvas';
export default {data() {return {}},methods: {// 获取设备的Dpr值getDpr() {if (window.devicePixelRatio && window.devicePixelRatio > 1) {return window.devicePixelRatio;}return 1;},/*** 将传入值转为整数* @param value* @returns {number}*/parseValue(value) {return parseInt(value, 10);},generateImage(event, ownerInstance) {var _this = this;var scanTextElem = document.getElementById('container');scanTextElem.style.opacity = '1';// 获取想要转换的dom节点var dom = document.getElementById('container');var box = window.getComputedStyle(dom);// dom节点计算后宽高var width = _this.parseValue(box.width);var height = _this.parseValue(box.height);// 获取像素比var scaleBy = _this.getDpr();// 创建自定义的canvas元素var canvas = document.createElement('canvas');// 设置canvas元素属性宽高为 DOM 节点宽高 * 像素比canvas.width = width * scaleBy;canvas.height = height * scaleBy;// 设置canvas css 宽高为DOM节点宽高canvas.style.width = width + 'px';canvas.style.height = height + 'px';// 获取画笔var context = canvas.getContext('2d');// 将所有绘制内容放大像素比倍context.scale(scaleBy, scaleBy);// 设置需要生成的图片的大小，不限于可视区域（即可保存长图）var w = document.getElementById('container').style.width;var h = document.getElementById('container').style.height;// 这儿的width、height一定得要有值，不然会保存失败html2canvas(dom, {allowTaint: false,width: window.clientWidth,height: window.clientHeight,backgroundColor:'green',useCORS: true}).then(function (canv) {// 将canvas转换成图片渲染到页面上let url = canv.toDataURL('image/png');// base64数据ownerInstance.callMethod('getSaveImg', {base64data: url})});},}
}
</script><style>
.content {display: flex;flex-direction: column;align-items: center;justify-content: center;
}.logo {height: 200rpx;width: 200rpx;margin: 200rpx auto 50rpx auto;
}.text-area {display: flex;justify-content: center;
}.title {font-size: 36rpx;color: #8f8f94;
}
</style>

参考文档：

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