跨平台应用开发进阶(五十三)：uni-app 通过webview方式嵌套H5实现图片点击下载

Posted 2023-01-22 No Silver Bullet

文章目录

• • 一、前言
  • 二、实现方案
  • 三、拓展阅读

一、前言

在项目开发过程中，遇到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》