vue一键下载网页图片；js for循环生成下载图片；js 图片下载；js生成canvas图片下载

<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>