uniapp 图片保存到相册

传输门

在看官网的时候发现H5是不能图片保存到相册的

首先 html 绑定 @longtap 长按事件

<image :src="qrcodeImg" @longtap="shareImg(qrcodeImg)"></image>

js

	shareImg(dataurl) {
    
    
				let _this = this
				
					// APP 保存图片
					const bitmap = new plus.nativeObj.Bitmap("test");
					bitmap.loadBase64Data(dataurl, function() {
    
    
						const url = "_doc/" + new Date().getTime() + ".png"; // url为时间戳命名方式
						bitmap.save(url, {
    
    
							overwrite: true, // 是否覆盖
						}, (i) => {
    
    
							uni.saveImageToPhotosAlbum({
    
    
								filePath: url,
								success: function() {
    
    
									_this.$u.toast("图片保存成功");
									bitmap.clear()
								}
							});
						}, (e) => {
    
    
							_this.$u.toast("图片保存失败");
							bitmap.clear()
						});
					}, (e) => {
    
    
						_this.$u.toast("图片保存失败");
						bitmap.clear()
					});
				
					// H5 保存图片
					const imgUrl = dataurl;
					if (window.navigator.msSaveOrOpenBlob) {
    
    
						let bstr = atob(imgUrl.split(",")[1]);
						let n = bstr.length;
						let u8arr = new Uint8Array(n);
						while (n--) {
    
    
							u8arr[n] = bstr.charCodeAt(n);
						}
						let blob = new Blob([u8arr]);
						window.navigator.msSaveOrOpenBlob(blob, "chart-download" + "." + "png");
					} else {
    
    
						let a = document.createElement("a");
						a.href = imgUrl;
						a.setAttribute("download", "chart-download");
						a.click();
					}
			}

记得在手机上测试保存效果