分销海报的生成

:-}

产品需求

最近流行用朋友圈海报图进行拉新或者一些运营活动,这个海报生成需要有一些用户的个人信息数据,怎么做到很快生成海报返回用户,并且保证清晰度呢?

技术选型

1.PHP的gd库,通过添加水印的方式生成海报,保存海报图到服务器,然后发给用户图片地址(服务端生成,准确率高,缺点就是慢)
2.js的canvas特性生成(客户端生成,速度快,缺点是不稳定,不同机型不一定都能成图)

代码实现

不啰嗦了,核心代码如下

<div id="content" >
    <img width="100%" src="<{$background_img_url}>" alt="">
    <p id="service_erweima" class="code" crossOrigin="Anonymous"></p>
    <span class="mess">扫码免费领课和我一起学习</span>
    <img src="<{$head_img}>" alt="" class="user" crossOrigin="Anonymous">
    <span class="name"><{$user_name}></span>
    <input type="hidden" id="m_redirect_code" value="<{$m_redirect_code}>">
    <input type="hidden" id="code" value="<{$code}>">
</div>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
<script src="/Public/Js/qrcode.min.js"></script>

<script>

    sleep(1000);

//生成二维码
    new QRCode(document.getElementById("service_erweima"), {
        text: ’https://www.your_host_url.com‘,
        width: 100,
        height: 100,
        border:1,
        colorDark : '#000000', //前景色
        colorLight : '#ffffff'  //背景色
    });


//canvas生成海报
    html2canvas($('#content'),{
        useCORS: true,
        logging: false,
        onrendered: function(canvas) {
            var image = new Image();
            image.crossOrigin = 'anonymous';
            image.src = canvas.toDataURL("image/png");

            $('#public-content').append(image);
            $('#content').hide();

        }
    });

//需要等待图片完全加载完了,DOM渲染完了,再生成,所以等一等
    function sleep(delay) {
        var start = (new Date()).getTime();
        while ((new Date()).getTime() - start < delay) {
            continue;
        }
    }

</script>