颖想家

我们经常需要在一张海报图里加上二维码和文字，重新生成一张图片供用户去朋友圈去分享，让用户成为推广员来获取收益。

目前浏览器对html5的支持越来越好，现在我们不使用服务器端的资源，直接在客户端利用canvas进行图片的合成。具体代码如下：

//背景图片，上面图片，文字

    function drawImg(bgimg,img,txt)

    {

        var canvas = document.createElement("canvas");

        canvas.width = 600;

        canvas.height = 800;

        var context = canvas.getContext("2d");

        context.rect(0 , 0 , canvas.width , canvas.height);

        context.fillStyle = "#fff";

        context.fill();

        var myImage = new Image();

        myImage.src = bgimg;

        myImage.crossOrigin = 'Anonymous';

        myImage.onload = function(){

            context.drawImage(myImage , 0 , 0 , 600 , 800);

            // 文字会显示在背景图上

            context.font = "16px Arial";

            context.fillStyle = '#000';

            context.fillText(txt,128,285);

            var myImage2 = new Image();

            myImage2.src = img;

            myImage2.crossOrigin = 'Anonymous';

            myImage2.onload = function(){

                context.drawImage(myImage2 , 0 , 0 , 100 ,100);

                // 如果文字要显示在上面的图上，在此处加context.fillText的内容

                var base64 = canvas.toDataURL("image/png");

                var img = document.getElementById('poster');

                img.setAttribute('src' , base64);

            }

        }

    }

drawImg("/image/background-img.jpg","/image/qrcode.jpg","测试文字");

在页面需要显示生成的海报图的地方加上<img src="" id="poster" />就可以了。