纯JS代码：将Canvas数组转为图片并打包成Zip文件下载

以下是将canvas转成图片并导入到Zip文件中供下载的纯js代码：

// 创建一个Zip实例
var zip = new JSZip();

// 定义canvas数组
var canvasArray = [canvas1, canvas2, canvas3]; // 假设canvas1、canvas2、canvas3是你的canvas变量

// 遍历canvas数组
canvasArray.forEach(function(canvas, index) {
  // 创建一个新的图片对象
  var img = new Image();

  // 将canvas转为图片的DataURL
  var dataURL = canvas.toDataURL('image/png');

  // 设置图片的src为DataURL
  img.src = dataURL;

  // 将图片加载完毕后，执行回调函数
  img.onload = function() {
    // 创建一个新的canvas元素
    var newCanvas = document.createElement('canvas');
    var context = newCanvas.getContext('2d');

    // 设置新的canvas元素的宽高和原canvas一致
    newCanvas.width = canvas.width;
    newCanvas.height = canvas.height;

    // 将图片绘制到新的canvas上
    context.drawImage(img, 0, 0);

    // 将新的canvas转为图片的DataURL
    var newDataURL = newCanvas.toDataURL('image/png');

    // 将图片的DataURL加入到Zip文件中
    zip.file('image' + (index + 1) + '.png', newDataURL.split(',')[1], { base64: true });

    // 如果已遍历到最后一个canvas，就生成并下载Zip文件
    if (index === canvasArray.length - 1) {
      zip.generateAsync({ type: 'blob' }).then(function(content) {
        // 创建一个a标签
        var a = document.createElement('a');
        // 创建一个URL对象
        var url = URL.createObjectURL(content);
        // 将a标签的href设置为URL
        a.href = url;
        // 设置a标签的下载属性
        a.download = 'canvas_images.zip';
        // 模拟点击a标签进行下载
        a.click();
        // 释放URL对象
        URL.revokeObjectURL(url);
      });
    }
  };
});

请注意，上述代码使用了JSZip库来创建和处理Zip文件。你需要在HTML文件中引入JSZip库：

<script src='https://cdnjs.cloudflare.com/ajax/libs/jszip/3.6.0/jszip.min.js'></script>

另外，该代码将canvas转为图片使用了toDataURL方法，并设置了图片格式为PNG。你可以根据需要修改图片格式。