摘要：先上代碼獲取上傳和展現的圖片。解決辦法設定最大寬度，將圖片等比縮放，這樣子就少了向擴展元素這部分的損耗。因此出了必須前端搞定，最好的方式，還是在后臺跑腳本運行合并。

先說背景：工作中遇到一個問題，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原生的好。

因此：出了必須前端搞定，最好的方式，還是在后臺跑腳本運行合并。

個人小站原文鏈接