解决夸克、QQ、UC浏览器保存base64图片失败问题？

Question

关于夸克、qq、uc等浏览器保存base64图片问题？
使用各品牌手机自带浏览器和chrome保存是没有的。只要使用这些浏览器就会保存失败。

1. 直接将base64字符串赋值给图片，提醒用户长按保存，默认浏览器保存成功
   uc与夸克点击保存都是没有任何反应
2. 将base64转为blob，并且使用a标签下载

var arr = response.tempFilePath.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);    

夸克、uc、qq都是下载一个.bin结尾的文件，并且会保存失败

不知道有没有解决办法？

Answer 1

我之前也遇到一个类似的问题,应用有一个图片剪裁的功能,用户上传图片,发现图片尺寸不对会进行剪裁,剪裁后图片以 base64 的格式输出,之后把图片上传到云存储上。也是在你列举的几个浏览器上上传失败,当时的做法是把剪裁后的图片在一个新的页面上打开,然后让用户保存后重新上传图片。