es5 下载图片并重命名
时间: 2024-02-10 21:03:13 浏览: 43
在 ES5 中,可以使用 XMLHttpRequest 对象来下载图片,并使用 Blob 对象来创建一个新的文件并重命名它。以下是一个示例代码:
```javascript
function downloadImage(url, newName) {
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'blob';
xhr.onload = function() {
if (this.status == 200) {
var blob = this.response;
var a = document.createElement('a');
a.style.display = 'none';
document.body.appendChild(a);
var url = window.URL.createObjectURL(blob);
a.href = url;
a.download = newName;
a.click();
window.URL.revokeObjectURL(url);
}
};
xhr.send();
}
// Usage:
downloadImage('https://example.com/image.jpg', 'new-name.jpg');
```
这个函数会发送一个 GET 请求来下载指定的图片。一旦请求完成,它会创建一个 Blob 对象,然后创建一个链接并将其赋值给一个新创建的 `<a>` 元素的 `href` 属性。然后,使用 `download` 属性来指定新的文件名,并模拟点击该链接以触发下载。最后,释放对象 URL 以避免内存泄漏。
请注意,这个示例代码可能无法在所有浏览器中正常工作,因为它使用了一些新的 API,如 Blob 和 createObjectURL。建议使用现代的浏览器或使用第三方库来处理这些任务。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)