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

举报
SHQ5785 发表于 2023/10/21 14:58:29 2023/10/21
【摘要】 一、前言在项目开发过程中,遇到uni-app通过webview嵌套H5项目,实现H5中图片点击下载的需求。 二、实现方案实现思路:需要用到Bitmap,把base64转成bitmap文件对象,保存到系统相册(但是此时某些手机上无法显示出来,其实是保存成功的),然后使用plus.gallery.save方法将图片保存到系统相册中。Bitmap是原生图片对象,其有个方法是loadBase64D...

一、前言

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

二、实现方案

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

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

  2. 然后使用loadBase64Database64字符串转换为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实现保存文件到系统相册中。

三、拓展阅读

【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。