二维码图片合成 ----合成图片以便微信长按保存（移动端）

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);
                      }

        }
    });

});

 

转载于:https://www.cnblogs.com/queende7/p/8668787.html