vue 后台拿到base64地址，pc端将图片合成下载

vue 后台拿到base64地址，pc端将图片合成下载

1、首先将后台的base64数据转化为数组，封装好

2、然后开始利用canvas画图

draw(dataList, x, y) {
var canvas = document.createElement(“canvas”);
var datalength = dataList.length
canvas.height = (datalength/5)y;
var context = canvas.getContext(“2d”);
const encoderOptions = 1;
var k = 0;
dataList.forEach((ele, i) => {
canvas.width = 5x;
var myImage = new Image();
myImage.crossOrigin = ‘Anonymous’;
myImage.src =‘data:image/jpeg;base64,’ + ele;
myImage.onload = () => {
var j = Math.floor(i/5);
context.drawImage(myImage, xk, jy, 150, 150);
k++;
if((i+1)%5 == 0){k = 0;}
var base64 = canvas.toDataURL(“image/png”, encoderOptions);
var img = document.getElementById(‘avatar’);
const imageDiv = document.getElementById(‘image-container’)
imageDiv.innerHTML =

}

  })
},

dataList:图片的base64地址数组，x，y，canvas的宽高

3、画布位置

## 4、此时已经将多个二维码合并成了一张图片 

5、到这儿，直接下载图片就好

ok,此时功能已基本完成，帮助到你，点个赞吧！有好的方法留言，共同进步欧！！！