通过批量上传图片，自定义文案生成海报，pc支持批量下载，h5由于浏览器限制仅支持单个下载。每个图片支持实时预览。主要运用html2canvas进行截屏处理，写的不好，勿喷，仅供学习参考。滕叙X5内核需要手动保存。

先看一下效果图

文件目录：

代码实现过程：

1、第一步通过 input进行批量上传图片input设置属性multiple="multiple"

<input :type="type" name="file" accept="image/gif,image/jpeg,image/jpg,image/png" multiple="multiple"
@change="fileChange($event)">

2、每个图片都可以编辑，在vue data中定义一个数组，保存多个数据conImgList: []。根据自己的情况里面保存自定义数据，我这里定义的有

{
id: _this.id++, //id
img: e.target.result, //图片 base64
date: "", //时间
time: "", //日期
week: "",//星期
weather: "",//天气
temperature: "",//温度
address: "",//地址
width: img.width,//图片源宽，主要进行html2canvas绘制海报用到
height: img.height,//图片源高，主要进行html2canvas绘制海报用到
}

3、单个下载图片，先绘制，在下载

async down(item) {
if(this.isWeiXin() && await this.uploadAddress(item.address)){
this.rearawSee(item)
return
}
if (await this.uploadAddress(item.address)) {
html2canvas(this.$refs[`imageWrapper${item.id}`][0], {
scale: 2,
useCORS: true, // 【重要】开启跨域配置
allowTaint: true, //允许跨域图片
taintTest: false, //是否在渲染前测试图片
}).then((canvas) => {
let dataURL = canvas.toDataURL("image/png");
let a = document.createElement("a");
a.style.display = "none";
a.download = new Date().getTime();
a.href = dataURL;
document.body.appendChild(a);
a.click();
});
}
},

4、查看图片，预览

//重新绘制图片 并 查看预览图
rearawSee(item) {
this.srcList = [];
html2canvas(this.$refs[`imageWrapper${item.id}`][0], {
scale: 2,
useCORS: true, // 【重要】开启跨域配置
allowTaint: true, //允许跨域图片
taintTest: false, //是否在渲染前测试图片
}).then((canvas) => {
let dataURL = canvas.toDataURL("image/png");
this.posterImg = dataURL;
this.srcList.push(dataURL);
setTimeout(() => {
this.$refs.img.clickHandler();
}, 100);
});
},

5、文件启动 （这里以电脑已经存在node，存在npm命令，没有的，自行百度安装node）

（1）运行命令 npm install 安装依赖

（2）运行命令 npm run serve 启动程序

（3）运行命令 npm run build 打包上传到服务器（dist文件打包好的文件）

程序写的不好，勿喷！加油、同行！

6、演示图