场景需求
一个页面有很多图片,想将其中一部分(某个元素下的)图片下载下来。仅仅下载而已,不(没)想(比)用(要)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版权协议,转载请附上原文出处链接和本声明。