图片下载后类型错误的解决方法

很多用户在下载图片时，遇到下载文件类型错误的问题，例如下载的文件类型为txt，而实际文件类型应为png。本文将提供解决方案。

问题：下载图片类型错误

点击下载按钮后，下载的文件类型与预期不符，例如下载的是.txt文件，而非.png图片文件。

解决方案：添加文件后缀名

问题在于保存文件时缺少正确的文件后缀名。 以下代码片段展示了如何修正这个问题。

原始代码:

<code class="javascript">function saveAs(data, name) {
    const urlObject = window.URL || window.webkitURL || window;
    const export_blob = new Blob([data]);
    const save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
    save_link.href = urlObject.createObjectURL(export_blob);
    save_link.download = name;
    save_link.click();
}</code>

修改后的代码:

<code class="javascript">function saveAs(data, name, type = 'png') { // 添加type参数，默认为png
    const urlObject = window.URL || window.webkitURL || window;
    const export_blob = new Blob([data], { type: `image/${type}` }); // 设置Blob类型
    const save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
    save_link.href = urlObject.createObjectURL(export_blob);
    save_link.download = `${name}.${type}`; // 添加文件后缀
    save_link.click();
}</code>

此修改在saveAs函数中添加了type参数，并使用该参数设置Blob对象的type属性，确保浏览器正确识别文件类型。 同时，在save_link.download中添加了文件后缀名。

更完善的方案：从URL中获取文件类型

为了更可靠地获取文件类型，建议从图片URL中提取后缀名。

<code class="javascript">function getFileType(url) {
    return url.split('.').pop().split('?')[0]; //处理URL参数
}</code>

该函数从URL中提取最后一个点号后面的部分作为文件类型，并处理URL参数的影响。

使用方法：

<code class="javascript">const url = 'https://img-blog.csdnimg.cn/534762daa9654b61a89b341a7a82e123.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LqU6Iqx5ryP,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center';
const fileType = getFileType(url);
saveAs(imageData, fileName, fileType); // 使用获取到的文件类型</code>

通过以上方法，可以有效解决图片下载类型错误的问题，确保下载的图片文件类型正确。