下载指定元素下的所有图片

场景需求

一个页面有很多图片,想将其中一部分(某个元素下的)图片下载下来。仅仅下载而已,不(没)想(比)用(要)python、java、c#…。
就用java写了个满足需求就可以了、用完之后放在这里记一下,万一以后再用呢


一、代码

class DownImg{
    index = 0
    srcList = []
    IntervalNO = null

    constructor(el){
        this.srcList = this.DocGetImgs(el)

        this.IntervalNO = setInterval(() => {
            if(this.srcList[this.index]){
                this.downloadImage(this.srcList[this.index])
                this.index++
            }
            else {
               clearInterval(this.IntervalNO)
            }
        }, 2000)
    }

    getImageBase64(image){
        const canvas = document.createElement('canvas')
        canvas.width = image.width
        canvas.height = image.height
        const ctx = canvas.getContext('2d')
        ctx.drawImage(image, 0, 0, image.width, image.height)
        // 获取图片后缀名
        const extension = image.src
            .substring(image.src.lastIndexOf('.') + 1)
            .toLowerCase()
        // 某些图片 url 可能没有后缀名,默认是 png
        return canvas.toDataURL('image/' + extension, 1)
    }

    /**
     * 单张图片下载
     * @param url 图像链接
     * @param downloadName 图片名称
     */
    downloadImage(url){
        let downloadName = url.substring(url.lastIndexOf("/") + 1, url.lastIndexOf("."))
        const link = document.createElement('a')
        link.setAttribute('download', downloadName)
        const image = new Image()
        // 添加时间戳,防止浏览器缓存图片
        image.src = url + '?timestamp=' + new Date().getTime()
        console.log(image.src)
        // 设置 crossOrigin 属性,解决图片跨域报错
        image.setAttribute('crossOrigin', 'Anonymous')
        image.onload = () => {
            link.href = this.getImageBase64(image)
            link.click()
        }
    }
}

new DownImg(document.querySelector("#item"))

有注释的地方、从网上找的
代码赋值到控制台执行一下就可以
简单粗暴的同时可能会有bug、如果想优雅的下载还是用python处理下比较好



版权声明:本文为weixin_45814639原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。