博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

安卓手机微信H5无法长按保存图片修复

Posted on 2024-07-04 16:04  学以致用的人  阅读(176)  评论(0编辑  收藏  举报

 

<image id="saveImg" :src="imgSrc"></image>

  主要是因为空格的处理:this.img.replace(/(\r\n)|(\n)|(\r)/g, "")

网络上的其他方式都尝试了 却忽略了最简单的问题;

computed: {
		
			imgSrc(){
				if(/android/i.test(navigator.userAgent)){ //判断是不是安卓手机
					var imgSrc = this.img.replace(/(\r\n)|(\n)|(\r)/g, "")
					return imgSrc;
					
				}else{
					var url='data:image/png;base64'+this.img
					return url;
				}
			}
		},

以上就可以解决长按保存的问题 

如果需要点击保存图片:以下方法会指引跳转到浏览器打开,微信中的H5无法下载;

 

<image id="saveImg" :src="img"></image>

  

// #ifndef APP-PLUS
				const base64 = this.img; // 这里是你的64位图片数据
				var arr = base64.split(',');
					var bytes = atob(arr[1]);
					let ab = new ArrayBuffer(bytes.length);
					let ia = new Uint8Array(ab);
					for (let i = 0; i < bytes.length; i++) {
						ia[i] = bytes.charCodeAt(i);
					}
					var blob = new Blob([ab], { type: 'application/octet-stream' });
					var url = URL.createObjectURL(blob);
					var a = document.createElement('a');
					a.href = url;
					a.download = new Date().valueOf() + ".png";
					var e = document.createEvent('MouseEvents');
					e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
					a.dispatchEvent(e);
					URL.revokeObjectURL(url);
 // #endif