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

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

1	`<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无法下载；

1	`<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
                