使用JavaScript下载图片并保存到本地的详细解释和代码示例
作者：zero笨小孩
在前端开发中经常会遇到需要将图片从网络上下载并保存到本地的需求,这篇文章主要给大家介绍了关于使用JavaScript下载图片并保存到本地的详细解释和代码示例,文中通过代码介绍的非常详细,需要的朋友可以参考下
前言
在前端开发中，经常会遇到需要将图片从网络上下载并保存到本地的需求。本文将介绍如何使用 JavaScript 实现下载图片的功能，并提供详细的解释和代码示例。
1. downloadImage 函数
首先，让我们来了解 downloadImage 函数的实现原理和作用。这个函数的主要功能是接收图片的 URL 和要保存的文件名，然后在用户点击下载链接时将图片保存到本地。
function downloadIamge(src, imgName){
let image = new Image();
image.src = src;
image.setAttribute("crossOrigin", "anonymous");
image.onload = function() {
let c = document.createElement("canvas");
c.width = image.width;
c.height = image.height;
c.getContext("2d").drawImage(image, 0, 0, image.width, image.height);
let a = document.createElement("a");
a.download = imgName;
a.href = c.toDataURL("image/png");
a.click();
}
}2. 实现原理解释
- 首先，创建一个新的 Image 对象，并将图片的 URL 赋值给它。
- 通过设置
crossOrigin属性为"anonymous"，解决跨域访问的问题。 - 当图片加载完成后，创建一个新的 canvas 元素，并将图片绘制到 canvas 上。
- 创建一个新的
<a>元素作为下载链接，并设置下载的文件名为imgName。 - 将 canvas 的数据转换为 Data URL，并将其赋值给下载链接的
href属性。 - 最后，模拟用户点击下载链接，触发图片下载的操作。
3. 使用示例
下面是一个使用示例，展示了如何调用 downloadImage 函数下载图片到本地：
const imageUrl = "https://example.com/image.jpg"; const imageName = "myImage.jpg"; downloadImage(imageUrl, imageName);
4. 注意事项
- 确保图片的 URL 是有效的，并且具有足够的权限允许跨域访问。
- 如果图片来自其他域名，请确保在服务器端设置了正确的跨域资源共享（CORS）配置。
通过本文的介绍，你现在应该了解如何使用 JavaScript 下载图片并保存到本地。这个方法非常实用，可以帮助你在前端开发中处理各种图片下载需求。
附：多个下载
前端下载的实际操作是由浏览器来处理的。当用户点击下载链接或者通过JavaScript触发文件下载时，浏览器会负责发起文件下载请求，并将文件保存到用户的本地计算机中。浏览器会处理文件下载的所有细节，包括网络请求、接收文件数据、保存文件等操作。
所以一般情况下，我们要下载多个文件，只需要循环向浏览器提交下载任务就可以了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>点击下载多个图片</button>
<script>
const srcList = [
'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
]
// 获取button标签
const bt = document.querySelector('button')
// 给button添加点击事件
bt.addEventListener('click',downloadMany(srcList))
//下载多个
function downloadMany(srcList){
return function() {
srcList.forEach((url,index)=>{
//循环调用download函数下载
download(url,index+'png')
})
}
}
//下载函数
function download(url,fileName){
//图片的地址
fetch(url)
// 获取 blob 对象
.then(res=>res.blob())
.then(blob=>{
// 创建a标签
var link = document.createElement('a');
// 设置a标签为不可见
link.style.display = 'none';
// 将a标签添加到body
document.body.appendChild(link);
// 生成Blob URL并设置给a标签的href属性
var url = window.URL.createObjectURL(blob);
link.href = url;
// 设置a标签的download
link.download = fileName;
// 模拟点击事件进行下载
link.click();
//下载完成后清理URL对象和a标签
window.URL.revokeObjectURL(url);
document.body.removeChild(link);
})
}
</script>
</body>
</html>注意：URL.createObjectURL 生成的url如果过多会有效率问题，可以在合适的时机（download后）释放掉。
到此这篇关于使用JavaScript下载图片并保存到本地的文章就介绍到这了,更多相关JS下载图片并保存到本地内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！