javascript - 解决夸克、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 的格式输出,之后把图片上传到云存储上。也是在你列举的几个浏览器上上传失败,当时的做法是把剪裁后的图片在一个新的页面上打开,然后让用户保存后重新上传图片。

Answer 2

这个问题涉及到浏览器对Base64编码的图片数据和下载的处理方式。根据你提供的信息，使用夸克、QQ、UC浏览器时，直接将Base64字符串赋值给图片并尝试保存会失败，即使转换为Blob对象并通过下载的方式也会出现同样的问题。

以下是几个可能的解决方案，你可以尝试一下：

1. 检查响应头: 检查服务器的响应头，确保服务器返回的响应头中包含了正确的Content-Type，例如image/png或image/jpeg。有些浏览器可能会根据响应头的Content-Type来判断如何处理响应的数据。
2. 使用服务端处理: 在服务器端，将Base64编码的图片数据转换为实际的图片格式（如PNG或JPEG），然后返回给浏览器。这样，浏览器接收到的是真实的图片数据，而不是Base64编码的字符串。
3. 检查跨域策略: 如果你的Base64图片数据是从其他域获取的，确保目标服务器设置了适当的CORS（跨域资源共享）策略，允许你的网页进行跨域请求和下载。
4. 检查浏览器插件或扩展: 有时，浏览器插件或扩展可能会干扰正常的下载功能。尝试在无插件或扩展模式下运行浏览器，看看问题是否仍然存在。
5. 使用其他方法下载: 除了使用Blob对象和a标签下载的方法外，还可以尝试使用JavaScript库或框架提供的下载功能，如Axios等。

需要注意的是，由于不同浏览器的处理方式和限制可能有所不同，因此解决方案可能需要根据具体使用的浏览器进行调整。同时，确保你的代码中没有其他可能导致问题的地方，如跨域问题、网络错误等。

希望这些解决方案能对你有所帮助！如果问题仍然存在或有其他疑问，请随时提问。