h5移动端生成海报，图文结合

小程序 canvas生成海报

效果图：大背景和红圈圈为canvas生成；

1.css部分

  <style>
        body, html, div, img, p {
            margin: 0;
            padding: 0;
        }
        .poster {
            width: 15rem;
            height: 22.5rem;
            position: fixed;
            top: 2rem;
            left: 50%;
            margin-left: -7.5rem;
        }

        .save_poster {
            margin-top: 0.5rem;
            text-align: center;
            font-size: 0.85rem;
            color: #333333;
        }

        .poster_img {
            display: block;
            width: 15rem;
            height: 22.5rem;
        }

        .poster_container {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            background: #E5E5E5;
            display: none;
        }
    </style>

2.js部分

<script>
    var code_model = '<div id="qrcode" style="position: fixed;opacity: 0;"></div>',//放置二维码的隐藏域
        canvas_model = '<canvas width="600" height="900" style="position: fixed;opacity:0;" id="myCanvas"></canvas>',//放置canvas的隐藏域
        poster_model = '<div class="poster_container"><div class="poster"><img src="" alt="" class="poster_img"><p class="save_poster">长按保存图片至手机相册</p><p style="margin-top: 0.5rem" class="aaaa"></p></div></div>';
        //poster_model为我们最终看到效果图
    $("body").append(code_model, canvas_model, poster_model);
    $.ajax({
        url: "/Tmp/hb50",
        data: {
            id: id
        },
        success: function (res) {
            $.hideLoading();
            if (res.e = "9999") {
                if (!res.data.is_buy) {
                    location.href = res.data.jump_url;
                    return false;
                }
                $(".poster").show();
                var data_base = res.data.poster_info;
                //生成二维码链接http://code.ciaoca.com/javascript/qrcode/
                new QRCode('qrcode', {
                    text: data_base.url,
                    width: 100,
                    height: 100,
                    colorDark: '#000000',
                    colorLight: '#ffffff',
                    correctLevel: QRCode.CorrectLevel.H
                });
                var c = document.getElementById("myCanvas"), cxt = c.getContext("2d");
                var img = new Image(), imgUrl, personName = data_base.name;
                img.crossOrigin = 'anonymous';//跨域问题
                img.src = data_base.image;
                img.onload = function () {//图片加载为异步加载，确定加载完毕后调用drawImage()
                    cxt.drawImage(img, 0, 0);//9个参数(图像地址，X轴起点，Y轴起点，原图宽，原图高，左边距，上边距，需要宽，需要高)
                    cxt.save();//剪裁问题。与restore()配合使用。剪裁后我们的canvas操作都集中在圆形区域内
                    console.log("save");//所以操作前对画布进行保存，裁剪完毕后恢复restore()
                    cxt.beginPath();
                    cxt.arc(100, 580, 46, 0, 2 * Math.PI, true);//http://www.runoob.com/tags/canvas-arc.html
                    cxt.strokeStyle = '#fff';
                    cxt.stroke();
                    cxt.clip();
                    var img_head = new Image();
                    img_head.crossOrigin = 'anonymous';//跨域问题
                    var avatar_height = data_base.avatar_height, avatar_width = data_base.avatar_width;
                    img_head.src = data_base.avatar;
                    img_head.onload = function () {
                        //可能遇到安卓端img.onload方法不调用问题，也不报错 。可能是：后台调取微信头像直接返回给前端，
                        // 存在跨域问题（几遍后台请求头也处理了跨域）。可以拉回微信头像后经自己服务器处理下再返给前端
                        cxt.drawImage(img_head, 0, 0, avatar_height, avatar_width, 54, 534, 92, 92);
                        cxt.restore();
                        var img_code = new Image();
                        img_code.crossOrigin = 'anonymous';
                        cxt.lineWidth = "4";
                        cxt.strokeStyle = '#FFF';
                        cxt.rect(460, 766, 80, 80);
                        cxt.stroke();
                        setTimeout(function () {//IOS端不加延迟会出问题，有人说是toDataURL问题
                            img_code.src = $("#qrcode").find("img").attr("src");
                            img_code.onload = function () {
                                cxt.drawImage(img_code, 0, 0, 100, 100, 460, 766, 80, 80);
                                cxt.font = '21px Arial';
                                cxt.fillStyle = "#000";
                                cxt.fillText(personName, 250, 558);
                                imgUrl = c.toDataURL("image/png", 1);
                                $(".poster_img").attr("src", imgUrl);
                                $(".poster_container").show();
                            };
                        }, 0);
                    };
                };
            } else {
                $.toast(res.m, "text");
            }
        }
    });
</script>