<template>
<basic-container>
<div v-for="item in list ">
<img :src="item" alt="">
</div>
</basic-container>
</template>
<script>
export default {
data() {
return {
list: []
}
},
methods: {
addPicList() {
for (let index = 0; index < 41; index++) {
let url
if (index > 9) {
url = `https://net/images50common_00${index}.jpeg`
} else {
url = `https://net/2023/0ommon_000${index}.jpeg`
}
this.list.push(url)
this.downloadIamge(url)
}
},
downloadIamge(downUrl, name = new Date().valueOf()) {//下载地址和名字(时间戳)
console.log('下载:', downUrl)
let image = new Image();
// 解决跨域 Canvas 污染问题
image.setAttribute("crossOrigin", "anonymous");
image.onload = function () {
let canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
let context = canvas.getContext("2d");
context.drawImage(image, 0, 0, image.width, image.height);
let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
let a = document.createElement("a"); // 生成一个a元素
let event = new MouseEvent("click"); // 创建一个单击事件
a.download = name || "photo"; // 设置图片名称
a.href = url; // 将生成的URL设置为a.href属性
a.dispatchEvent(event); // 触发a的单击事件
};
image.src = downUrl;
}
},
mounted() {
this.addPicList()
},
};
</script>
<style scoped></style>
vue一键下载网页图片;js for循环生成下载图片;js 图片下载;js生成canvas图片下载
于 2023-02-28 13:12:34 首次发布