图片下载后类型错误的解决方法
很多用户在下载图片时，遇到下载文件类型错误的问题，例如下载的文件类型为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();}
修改后的代码:
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); // 使用获取到的文件类型
通过以上方法，可以有效解决图片下载类型错误的问题，确保下载的图片文件类型正确。
以上就是下载图片后文件类型错误怎么办？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1561590.html
微信扫一扫 
支付宝扫一扫 
