uni-app 通过webview方式嵌套H5实现图片点击下载

一、前言

在项目开发过程中，遇到uni-app通过webview嵌套H5项目，实现H5中图片点击下载的需求。

二、实现方案

实现思路：需要用到Bitmap，把base64转成bitmap文件对象，保存到系统相册（但是此时某些手机上无法显示出来，其实是保存成功的），然后使用plus.gallery.save方法将图片保存到系统相册中。

1. Bitmap是原生图片对象，其有个方法是loadBase64Data；于是首先创建一个bitmap对象;

2. 然后使用loadBase64Data将base64字符串转换为bitmap文件对象;

3. 调用bimap.save方法，将图片文件存入手机存储（记得bitmap.clear()，比较占内存）;

4. 应用plus.gallery.save方法将图片成功保存并显示；

点击分享按钮时，将图片转换为base64格式。

signShare() {
    this.toImage();
},
toImage() {
   Toast.loading();
   const node = this.$refs.luckyInfo;
   htmlToImage(node, 2).then(img => {
       this.shareObject.image = img;
       // launchSharePanelPic(this.shareObject);
// 展示海报
this.showPicNewyear(this.shareObject.image, this.shareObject.title);
       // this.goPage();
       Toast.hide();
   }).catch(err => {
       console.log(err);
       Toast.hide();
   })
},

其中，htmlToImage为利用html2canvas方法将页面html转换为base64。

// 利用html2canvas将页面html转换为base64
export function htmlToImage(node, ratio = 16/9) {
    // 获取像素比
    const scale = getDPR();
    let  canvasOptions = document.createElement("canvas"); 
    canvasOptions.width = window.innerWidth * scale;
    canvasOptions.height = window.innerWidth * ratio * scale;

    return new Promise((resolve, reject) => {
        html2canvas(node, {
            canvas: canvasOptions
        }).then(canvas => {
            let dataUrl = canvas.toDataURL("image/png");
            const image = dataUrl.replace(/^.+?base64,/, "");
            resolve(image);
        }).catch(err => {
            reject(err);
        });
    })
}

其中，luckyInfo为待保存图片区域。

<div class="pic-bg"
    :style="`background-image: url(${bgUrlBase64})`"
        ref="luckyInfo">
            <slot name="bg"></slot>
        	<slot name="userInfo"></slot>
			<slot name="barcode"></slot>
</div>

点击预览图片后，触发保存事件：

saveImgFile() {
	const bitmap = new plus.nativeObj.Bitmap("test");
	bitmap.loadBase64Data(this.footerUrlBase64, function() {
		const url = "_doc/" + new Date().getTime() + ".png";  // url为时间戳命名方式
		// uni.showToast({
		// 	title: 'saveHeadImgFile:' + url,
		// 	icon: 'none'
		// })
		bitmap.save(url, {
			overwrite: true,  // 是否覆盖
			// quality: 'quality'  // 图片清晰度
		}, (i) => {
			// uni.showToast({
			// 	title: '成功回调函数:' + JSON.stringify(i),
			// 	icon: 'none'
			// })
			plus.gallery.save(i.target, function() {
					uni.showToast({
						title: '图片保存至相册成功',
						icon: 'none'
					})
					bitmap.clear()
				},
				function(e) {
					uni.showToast({
						title: '图片保存至相册失败:' + JSON.stringify(e),
						icon: 'none'
					})
					bitmap.clear()
				},
			);
		}, (e) => {
			uni.showToast({
				title: '图片保存失败1:' + JSON.stringify(e),
				icon: 'none'
			})
			bitmap.clear()
		});
	}, (e) => {
		uni.showToast({
			title: '图片保存失败2:' + JSON.stringify(e),
			icon: 'none'
		})
		bitmap.clear()
	});
},
toSave() {
	uni.showModal({
		title: '图片保存',
		content: '确定要保存图片吗',
		success: e => {
			if (e['confirm']) {
				this.saveImgFile();
			}
		}
	});
}

其中，解析HTML中[object,object]内容，可以通过JSON.stringify(需要解析的内容)实现。
plus.gallery.save实现保存文件到系统相册中。

三、拓展阅读

• 《html5+ plus.gallery.save》