HTML+JS下载图片到本地

最新推荐文章于 2025-07-09 10:06:58 发布

讨吃的讨吃了

最新推荐文章于 2025-07-09 10:06:58 发布

阅读量3.4w

点赞数 1

分类专栏： JS

JS 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一个简单的JavaScript函数，用于通过指定的选择器和文件名下载网页中的图片。此函数使用了querySelector来获取img元素，并创建了一个a标签触发点击事件实现图片下载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

网上搜了很多资料。终于找到了一个兼容性好的。贴上地址。https://www.cnblogs.com/zhangkaiqiang/p/8183926.html

我简单介绍一下。

函数是这样的。

两个参数，第一个是ID，CLASS名或者其他的，也就是CSS中的选择器，任何一个都可以。第二个是想重命名的名字。

function downloadIamge(selector, name) {
    // 通过选择器获取img元素，
    var img = document.querySelector(selector)
    // 将图片的src属性作为URL地址
    var url = img.src
    var a = document.createElement('a')
    var event = new MouseEvent('click')
    
    a.download = name || '下载图片名称'
    a.href = url
    
    a.dispatchEvent(event)
}

接着HTML调用：

<img src="1.jpg" class="img1"></img>
<input type="button" value="download_image" onclick="downloadIamge('.img1','1.jpg')">