移动端canvas合成图片，填充文字自动换行

骑猪看日落 2022-05-31 07:45 327阅读 0赞

今天用canvas合成带有微信公众号二维码和祝福语的春节贺卡  
![这里写图片描述][70]  
由于代码都是原生的没有引入其他库，所以直接将对应部分贴出来吧。

html

<canvas id="canvas" class="hide">
        Your browser does not support the HTML5 canvas tag.
    </canvas>
    
    <img id="page2_bg" src="images/greeting_card1.jpg" class="hide"/>
    
    <img id="test1" class="hide" src="images/code.png" />
    
    <div id="new-img-div" class="hide">
        <img src="images/close.png" class="close-img"/>
        <div id="onlyoneImg"></div>
    </div>

css:

.hide { display: none; }

其他元素布局的样式就不贴了，毕竟没有难度

接下来看看重头戏js:

//给canvas定宽高
        var bodyW = $('body').width()+'px';
        var bodyH = $('body').height()+'px';
        console.log('bodyW',bodyW);
        console.log('bodyH',bodyH);
        $("#canvas").attr('width','640px')
        $("#canvas").attr('height','1138px')
    
        //画图函数
        function writeTextOnCanvas(cns, lh, rw, text){ 
            var cns = document.getElementById(cns);
            var ctx = cns.getContext("2d");
            //提供canvas的数据
            var canvasW = $('#canvas').width();
            var canvasH = $('#canvas').height();
            console.log('canvasW',canvasW)
            //
            var wordsTop = canvasH*0.185;
            var wordsLeft = canvasW*0.195;
            var wordsAllWidth = canvasW*0.65;
    
            console.log(wordsAllWidth)
            var wordsNumOnline = parseInt(wordsAllWidth/12)
            var img1=document.getElementById("page2_bg");
            var img2= document.getElementById("test1");
            //var img111 = img1.attr('src');
            console.log(img1);
    
            //画背景
            ctx.drawImage(img1,0,0,canvasW,canvasH);
            //画二维码
            ctx.drawImage(img2,428,884,171,172);
    
            //处理文字
            var lineheight = lh;
            var text = text;
            ctx.width = cns.width;
            ctx.height = cns.height;
            //字体大小必须和字体类型一起设置
            ctx.font="24px Helvetica";
            //字体颜色
            ctx.fillStyle = '#f6dda0';
            function getTrueLength(str){ //获取字符串的真实长度（字节长度）
                var len = str.length, truelen = 0;
                for(var x = 0; x < len; x++){
                    if(str.charCodeAt(x) > 128){
                        truelen += 2;
                    }else{
                        truelen += 1;
                    }
                }
                return truelen;
            }
            function cutString(str, leng){ //按字节长度截取字符串，返回substr截取位置
                var len = str.length, tlen = len, nlen = 0;
                for(var x = 0; x < len; x++){
                    if(str.charCodeAt(x) > 128){
                        console.log('汉字')
                        if(nlen + 2 < leng){
                            nlen += 2;
                        }else{
                            tlen = x;
                            break;
                        }
                    }else{
                        console.log('字符')
                        if(nlen + 1 < leng){
                            nlen += 1;
                        }else{
                            tlen = x;
                            break;
                        }
                    }
                }
                return tlen;
            }
            for(var i = 1; getTrueLength(text) > 0; i++){
       //分行
                var tl = cutString(text, wordsNumOnline);
                ctx.fillText(text.substr(0, tl).replace(/^\s+|\s+$/, ""), wordsLeft, i * lineheight + wordsTop);
                text = text.substr(tl);
            }
    
            //转化成图片
            var flagImg = document.createElement("img");
            flagImg.src = cns.toDataURL("image/png");
    
            $("#onlyoneImg").append(flagImg);
            $('#canvas').addClass('hide');
        }
    writeTextOnCanvas("canvas", 32, 40, '祝你新年快乐，万事如意');

有一点需要注意的：

flagImg.src = cns.toDataURL("image/png");

这里的转化会出现跨域问题，所以合成的图片来源必须要是同源。

[70]: /images/20220531/ba0415b58c7a4e3bb94d0a1a3eb977a7.png