下载图片后文件类型错误怎么办？

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

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

问题：下载图片类型错误

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

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

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

原始代码:

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();
}

修改后的代码:

新视窗CMS企业管理程序 5.1

新视窗企业管理系统是一款小巧、实用、利于后续开发的ASP程序。适合大中小型企业的网站建设。1、新闻管理 2、产品管理 3、订单管理 4、广告管理 5、下载管理 6、留言管理 8、单页栏目(如企业简介,资质荣誉)9、人才招聘等等。 新视窗企业管理系统 5.1 更新日志:1、修改产品列表的图片自动缩略，防止图片变形.2、修改后台添加产品分类时，排序ID不写入数据库的错误.3、修改首页企业简介的链接地址

下载

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();
}

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

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

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

function getFileType(url) {
    return url.split('.').pop().split('?')[0]; //处理URL参数
}

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

使用方法：

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); // 使用获取到的文件类型

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