先说背景：工作中碰到一个题目，file组件上传图片，file是能够上传n张图片；然则，背景逻辑汗青缘由，只能展示一张。因而：考虑到本钱，决议在前端将多张图片兼并成一张给后端。

先上代码

_mergeImage2Canvas:function() {
    // 猎取file上传和展示的图片。平常file上传以后，有个小图标展示。
    var imgs = $(".img_files");
    if (!imgs) {
        return false;
    }

    // 建立原始图象
    // 缘由：file上传以后，展示往往是个缩略图，没法取到真正大小
    for (var i = 0; i < imgs.length; i++) {
        var fbwImg   = document.createElement("img");
        var fbwImgID = "temp_img_id" + i;
        $("#" + fbwImgID).remove();
        fbwImg.src   = imgs[i].src;
        fbwImg.className     = "temp-img-class";
        // 不显现，仅供挪用
        fbwImg.style.display = "none";

        // 暂时地区扩大
        $("#temp_section").append(fbwImg);
    }

    // 兼并原始图片，天生一个新的base64 图片
    var getOriginImgBase64 = function (oriImgs) {
        if (!oriImgs) {
            return false;
        }
        
        // 猎取canvas的宽高
        // 缘由：canvas须要起首指定宽高，所以须要提早猎取终究的宽高
        var maxWidth = 0;
        var height = 0;
        for (var i = 0; i < oriImgs.length; i++) {
            var img = oriImgs[i];
            if (img.width > maxWidth) {
                maxWidth = img.width;
            }
            height += img.height;
        }

        // 设定canvas
        var canvas    = document.createElement("canvas");
        canvas.width  = maxWidth + 10;
        canvas.height = height + 10;
        var ctx       = canvas.getContext("2d");

        // 留5margin
        var dheight = 5;
        for (var j = 0; j < oriImgs.length; j++) {
            var img     = oriImgs[j];
            var cheight = img.height;
            var cwidth  = img.width;

            // 留5 margin
            ctx.drawImage(img, 5, dheight, cwidth, cheight);

            dheight = dheight + cheight + 5;
        }

        // 天生的base64 放在须要的一个全局变量中。
        fbw_img_data = canvas.toDataURL('image/png');
        
        // 清算
        $(".temp_img_class").remove();
    };

    // 之所以运用timer，考虑到dom树假如没有加载完成，会取到高度有偏差
    var imgTimer = null;
    imgTimer = setTimeout(function () {
        getOriginImgBase64($(".temp_img_class"));

        if (imgTimer) {
            clearTimeout(imgTimer);
        }
    }, 300);
}

合成结果

图片一：小站logo

图片二：小图标：

合成结果：

道理简介

主如果经由过程canvas 猎取多个图片的base64编码，以后经由过程drawImage 函数兼并和toDataUrl的体式格局合成。

题目思索

• 题目一：必需支撑canvas，不然还须要背景一致跑剧本处置惩罚。

• 题目二：机能斲丧过大。append img 和base64代码对dom的斲丧都挺大，尤其是在挪动端，很轻易形成崩溃。解决办法：设定最大宽度，将图片等比缩放，这模样就少了向dom扩大元素这部份的消耗。

• 题目三：base64 在传输上机能斲丧也挺大，没有file原生的好。

因而：出了必需前端搞定，最好的体式格局，照样在背景跑剧本运转兼并。

个人小站原文链接