思路：
1.首先等待圖片載入完成
2.然後使用canvas完成圖片的合併
3.顯示合成圖片
步驟：
1.根據第一個思路，需要image的load和error事件,大致流程：
var l_image = new Image();
l_image.src = src;
l_image.onload = function () {}；
l_image.onerror = function () {};
2,根據第二個思路，需要canvas的drawImage()和toDataURL()兩個方法,大致流程：
先試用for迴圈依次將圖片寫入畫布，然後使用toDataURL生成新的圖片（返回值可以作為圖片的路徑）
3.根據需要是否顯示合成圖片：
程式碼：

$(function () {
   var $imgs = $('.img-boxs .merging'),
       $btnMerge = $('#btn-merge'),
       $mergedImage = $('.img-boxs .merged')[0],
       srcs = [],
       arr_img_w = [],
       arr_img_h = [],
       imgs_num = $imgs.length,
       loaded_img = 0;
   /*
   * 定義一個名為loading的函式,用於載入圖片以及獲取一些初始值
   * @param
 
    void
   * @return   void
   * */
   var loading = function () {
       for (var i = 0; i < imgs_num; i++) {
           try{
               if (!$($imgs[i])) {
                   throw 'loading函式引數$imgs['+i+']不能為空';
               }
               srcs[i] = $($imgs[i]).attr("src");
               var
 
 _image = new Image();
               _image.src = srcs[i];
               //儲存圖片的原始寬高
               arr_img_w.push(_image.width);
               arr_img_h.push(_image.height);
               //不論圖片載入完成還是失敗都執行該函式
               $(_image).on('load error', function () {
                   loadImage();
               });
           } catch (err) {
               printError(err);
           }
       }
       function loadImage () {
           if (imgs_num === loaded_img) {
               return false;
           }
           loaded_img = Math.min(imgs_num, ++loaded_img);
       }
   };

   loading();

   $btnMerge.on('click', function () {
        mergeImages();
   });

    /*
    * 定義一個名為mergeImages的函式,用於合併兩張圖片
    * @param    void
    * @return   void
    * */
   function mergeImages () {
       try {
           if (loaded_img!==imgs_num && 2!==imgs_num) {
               throw '圖片未載入完成或圖片的數目不為2';
               return false;
           }
           var canvas = document.createElement('canvas'),
               temp_w = 0,
               temp_h = 0,
               offset_w = Math.abs((arr_img_w[0] - arr_img_w[1]) / 2),//最後一張圖片居中需要的x軸移動值
               offset_h = Math.abs((arr_img_h[0] - arr_img_h[1]) / 2),//最後一張圖片居中需要的y軸移動值
               l_src = '',
               ctx = {};
           //畫布的寬度和高度和最大圖片的一樣
           canvas.width = getMaxofArray(arr_img_w);
           canvas.height = getMaxofArray(arr_img_h);
           ctx = canvas.getContext('2d');
           for (var i = 0; i < imgs_num; i++) {
               temp_w = arr_img_w[i];
               temp_h = arr_img_h[i];
               if (i == (imgs_num-1)) {
                   ctx.drawImage($imgs[i], 0, 0, temp_w, temp_h, offset_w, offset_h, temp_w, temp_h);
               } else {
                   ctx.drawImage($imgs[i], 0, 0, temp_w, temp_h, 0, 0, temp_w, temp_h);
               }
           }
           l_src = canvas.toDataURL('image/png');
           $($mergedImage).attr('src', l_src);
       } catch (err) {
           printError(err);
       }
   }

    /*
     * 定義一個名為getMaxofArray的函式,用於獲取陣列中的最大值
     * @param    array     elems        需要獲取最大值的陣列
     * @return   boolean   maxValue     返回最大值
     * */
   function getMaxofArray (elems) {
       try {
           if (!Array.isArray(elems)) {
               throw 'getMaxofArray函式的引數必須是陣列';
           }
       } catch (err) {
           printError(err);
       }
       return Math.max.apply(null, elems);
   }

    /*
     * 定義一個名為getMaxofArray的函式,用於獲取陣列中的最大值
     * @param    string     msg     產生的異常或錯誤
     * @return   void
     * */
   function printError (msg) {
       console.log('error message:', msg);
   }
});

注意：
1.要獲取圖片的原始值而不是css樣式，所以你可以在var image = new Image(),後取得圖片的原始值，
2.畫布的寬高應和最大圖片的寬高一致
3.圖片不僅要寫load事件,還要寫error事件

錯誤
如何控制顯示這樣的錯誤

$imgs[i].attr is not a function
    at loading (mergeImages.js:21)
    at HTMLDocument.<anonymous> (mergeImages.js:43)
    at mightThrow (jquery-3.2.1.js:3583)
    at process (jquery-3.2.1.js:3651)

你會好奇找了一圈，你會有沒什麼錯誤啊，jquery明明有這個方法啊等等的想法
首先你要明確，你肯定有錯，不然不會有錯誤，
其次使用console.log()列印元素會顯示dom元素,恭喜你，你離真相只有一步，
給元素加上$()吧,好了，問題解決了。
在jquery使用中很容易犯這個錯誤，一定要牢記。