二維碼圖片合成 ----合成圖片以便微信長按保存（移動端）

HTML:

<div id="box">
    <img src="" alt="" id="bg-img" width="100%">
    <!--生成的圖片寬高大小-->
    <canvas id="qr" style="display: none" width="640" height="1135"></canvas>
    <div class="bottom">
        <p>長按圖片保存，邀請好友助力</p>
    </div>
</div>

Javascript:

 

/* 獲取地址欄參數 */
function getQueryString (name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
    var r = window.location.search.substr(1).match(reg);
    var context = "";
    if (r != null)
        context = r[2];
    reg = null;
    r = null;
    return context == null || context == "" || context == "undefined" ? "" : context;
}

$(function(){
    var canvas = document.getElementById('qr'),
        bg-img = document.getElementById('bg-img'),
        ctx = canvas.getContext('2d'); // 拿到一個CanvasRenderingContext2D對象，全部的繪圖操做都須要經過這個對象完成
    var userId = getQueryString('user_id'); //獲取地址欄參數，統計邀請人
    
    //獲取用戶頭像、暱稱、分享的二維碼
    $.get("/open/api?method=mall.special.yunlan_image_base",{user_id: uesrId},function(res)     {
        if(res.response.status == "ok"){
            var bg = new Image(),
                qr = new Image(),
                logo = new Image();
            bg.src = '/assets/mob/20180325/images/share.jpg';
                      logo.src ="http://m.omicy.com/" + res.response.headimgurl_base64;
                      qr.src = "http://m.omicy.com/" + res.response.code_img_url_base64;
                      //canvas圖片合成
                      bg.onload = function(){
                        setTimeout(function(){
                            //繪製文本
                            ctx.font = "normal bold 32px Arial";
                            ctx.fillStyle = "#E95572"; // 設置顏色
                            ctx.drawImage(bg, 0, 0,bg.width,bg.height);
                            ctx.fillText(res.response.nickname, 165, 920, 240);
                            ctx.drawImage(logo, 0, 0, logo.width,logo.height, 37, 850, 120, 120);
                            ctx.drawImage(qr, 0, 0, qr.width, qr.height, 415, 880, 190, 190);
                            img.src = canvas.toDataURL();
                            $(".bottom").show();
                        }, 1000);
                      }

        }
    });

});