canvas toDataURL轉base64實現多張圖片合成一個圖片

前端時間，作穿搭助理時遇到這樣一個問題；多張圖片合成一張圖片的問題

業務背景是這樣的：

  後臺會根據不一樣天氣，根據某種規則；推薦給用戶不一樣的衣服搭配。咱們姑且將每一套咱們稱之爲    一個模板;

   而後，還要求模板的佈局按照衣服的類型，模板不一樣的佈局方案

   如今大概模板類型有以下幾個（後期還會加）

  原本，計算，定位這個模板已經夠頭疼了的；如今產品說這個加入衣櫥操做要把整個模板合成一張圖，放到衣櫥圖片庫中

還好之間簡單看過《H5高級程序設計》貌似提到了，能夠直接將canvas轉成圖片的方法；

wsc上也有說明，可是一筆帶過了  http://www.w3school.com.cn/tags/html_ref_canvas.asp

$("canvas")[0].toDataURL();

目前模板的效果以下圖所示：

如今我把上面的業務所有剝離出去，關鍵代碼以下：

    $("canvas").attr({
        "width": $(window).width() + "px",
        "height": "400px"
    });

    var img = [public_url + "/p_w_picpaths/bank-guangda.png", public_url + "/p_w_picpaths/bank-zhaosang.png", public_url + "/p_w_picpaths/Assist_man.png"]
    var canvas = $("canvas")[0].getContext('2d');
    var imgobj = {};


    var imgin = function() {
        for (var i = 0; i < img.length; i++) {
            var $img = new Image();
            $img.src = img[i];

            var loadImg = function($img, i) {
                $img.onload = function() {
                    canvas.drawImage($img, i * 50, i * 50, 50, 50);
                }
            };
            loadImg($img, i);
        }
        var base64 = $("canvas")[0].toDataURL();
        console.log(base64);
    }
    imgin();

須要說明一點就是：

   要監聽img的load事件，保證圖片加載成功以後，再在畫布上畫出來；

   轉base64的方法是$("canvas")[0].toDataURL();不是

   $("canvas")[0].getContext('2d').toDataURL();  本人剛開始沒注意，搞了半天才發現問題出在這裏。

最後轉出的效果大概以下，注意base64是有損壓縮。