var imageArr = [
    './image1.png',
    './image2.png',
    './image3.png',
    './image4.png',
    './image5.png',
    './image6.png'
];

drawImage(imageArr, function (data){
    var imgDom = document.createElement('img');
    imgDom.src = data;
    document.body.appendChild(imgDom);
});

/**
* 合并图片
* @param images 图片路径数组
* @param callback
*/
function drawImage(images, callback) {
    if (!images || images.length == 0) {
        return false;
    }
    var option = {
        width: 150, // 每个图片的宽
        height: 150, // 每个图片的高
        cols: 4, // 每行几张图片
        encoderOptions: 1 // 拼出来的图片的质量，0-1之间，越大质量越好
    }

    var imageCount = images.length; // 图片数量

    var rows = Math.ceil(imageCount / option.cols); // 行数

    var canvas = document.createElement('canvas'); // 创建canvas元素
    canvas.width = option.width * option.cols; // canvas宽度
    canvas.height = rows * option.height; // canvas的高度
    var context = canvas.getContext('2d'); // 创建渲染
    // 设置背景为白色
    context.fillStyle = '#fff';
    context.fillRect(0, 0, canvas.width, canvas.height);

    // 已绘制的图片数(onload和onerror为异步)
    var drawCount = 0;

    // 遍历图片路径数组
    images.forEach(function (img, index) {
        var imageItem = new Image();
        imageItem.src = img;
        // 跨域
        imageItem.crossOrigin = 'Anonymous';

        // 计算图片x坐标
        var xAxis = parseInt(index % 4) * option.width;
        // 计算图片y坐标
        var yAxis = parseInt(index / 4) * option.height;
        // 图片加载成功，绘制图片
        imageItem.onload = function () {
            context.drawImage(imageItem, xAxis, yAxis, option.width, option.height);
            drawCount++;

            if (drawCount === imageCount) {
                // canvas返回base64数据
                callback(canvas.toDataURL('image/jpeg', option.encoderOptions));
            }
        }
        // 图片加载失败，绘制空白
        imageItem.onerror = function () {
            drawCount++;
            if (drawCount === imageCount) {
                // canvas返回base64数据
                callback(canvas.toDataURL('image/jpeg', option.encoderOptions));
            }
        }
    });
}