js+canvas 图片+文字合成

<style>
     img {
        border: solid 1px #ddd;
     }
    </style>

主体：

<div align="center"> 
        <h3>图片+文字合成</h3>
        <img src="images/bg.png" width="300"> 
        <img src="images/himg.png" width="110"> 
        <img src="images/QR.png" width="146"> 
        <div style="position: absolute;left: 800px;top: 100px;width: 300px;padding: 10px;border: 1px solid #EEEEEE;">
           <strong>文字：</strong>
           <div style="padding: 10px 0;">用户名：中国好</div>
           <div>Tel：18068763980</div>
        </div>
     </div>
     <div id="imgBox" align="center" style="margin: 10px;">
        <input type="button" value="一键合成" οnclick="hecheng()">
     </div>

 

js部分：

<script>
            function hecheng() {
                draw(function() {
                    document.getElementById('imgBox').innerHTML = '<p style="padding:10px 0">合成图片成功！可以鼠标另存图片查看我是否是一张图片~~！</p><img src="'+base64[0]+'" width="300">';
                })
            }
            var data = [ 'images/bg.png', 'images/himg.png',
                    'images/QR.png'], base64 = [];
            var position = [[0,64,216,184,184],[0,763,1005,800,840]]; //position[0]为left值，position[1]为top值（图片相对位置），依次为图片1-图片3、文字1-文字2
            var size = [[750,110,146],[1334,110,146]];//size[0]为width值，size[1]为height值（图片相对大小），依次为图片1-图片3
            var text = ['中国好','18068763980'];//文字内容
            function draw(fn) {
                var c = document.createElement('canvas'), ctx = c
                        .getContext('2d'), len = data.length;
                //背景图宽高（第一张为背景图）
                c.width = size[0][0];
                c.height = size[1][0];
                ctx.rect(0, 0, c.width, c.height);
                ctx.fillStyle = '#fff';
                ctx.fill();
                function drawing(n) {
                    if (n < len) {
                        var img = new Image;
                        img.src = data[n];
                        if(n==0){
                          img.onload = function() {
                            ctx.drawImage(img, position[0][n], position[1][n], size[0][n], size[1][n]);//(img_name,left,top,width,height)
                            ctx.font="25px microsoft yahei";//设置画笔的字体大小和格式
                            ctx.fillStyle = "rgba(0,0,0,1)";//设置字体的颜色
                            ctx.fillText(text[0],position[0][len], position[1][len]);//将文字信息画在画布上，按照x,y的坐标，在手机上坐标不是很准确
                            ctx.fillText(text[1],position[0][len+1], position[1][len+1]);
                            drawing(n + 1);//递归
                          } 
                        }else if(n==1){
                          img.onload = function() {
                            ctx.drawImage(img, position[0][n], position[1][n], size[0][n], size[1][n]);
                            drawing(n + 1);//递归
                          } 
                        }else{
                          img.onload = function() {
                            ctx.drawImage(img, position[0][n], position[1][n], size[0][n], size[1][n]);
                            drawing(n + 1);//递归
                          } 
                        }
                        
                    } else {
                        //保存生成作品图片
                        base64.push(c.toDataURL("image/jpeg", 0.8));
                        //alert(JSON.stringify(base64));
                        fn();
                    }
                }
                drawing(0);
            }
        </script>

图片：