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

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

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

html

  1. <!--画布 -->
  2. <canvas id="canvas" class="hide">
  3.     Your browser does not support the HTML5 canvas tag.
  4. </canvas>
  5. <!--背景图-->
  6. <img id="page2_bg" src="images/greeting_card1.jpg" class="hide"/>
  7. <!--二维码-->
  8. <img id="test1" class="hide" src="images/code.png" />
  9. <!--装图片的容器-->
  10. <div id="new-img-div" class="hide">
  11.     <img src="images/close.png" class="close-img"/>
  12.     <div id="onlyoneImg"></div>
  13. </div>

css:

  1. .hide { display: none; }

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

接下来看看重头戏js:

  1. //给canvas定宽高
  2.     var bodyW = $('body').width()+'px';
  3.     var bodyH = $('body').height()+'px';
  4.     console.log('bodyW',bodyW);
  5.     console.log('bodyH',bodyH);
  6.     $("#canvas").attr('width','640px')
  7.     $("#canvas").attr('height','1138px')
  9.     //画图函数
  10.     function writeTextOnCanvas(cns, lh, rw, text){ 
  11.         var cns = document.getElementById(cns);
  12.         var ctx = cns.getContext("2d");
  13.         //提供canvas的数据
  14.         var canvasW = $('#canvas').width();
  15.         var canvasH = $('#canvas').height();
  16.         console.log('canvasW',canvasW)
  17.         //
  18.         var wordsTop = canvasH*0.185;
  19.         var wordsLeft = canvasW*0.195;
  20.         var wordsAllWidth = canvasW*0.65;
  22.         console.log(wordsAllWidth)
  23.         var wordsNumOnline = parseInt(wordsAllWidth/12)
  24.         var img1=document.getElementById("page2_bg");
  25.         var img2= document.getElementById("test1");
  26.         //var img111 = img1.attr('src');
  27.         console.log(img1);
  29.         //画背景
  30.         ctx.drawImage(img1,0,0,canvasW,canvasH);
  31.         //画二维码
  32.         ctx.drawImage(img2,428,884,171,172);
  34.         //处理文字
  35.         var lineheight = lh;
  36.         var text = text;
  37.         ctx.width = cns.width;
  38.         ctx.height = cns.height;
  39.         //字体大小必须和字体类型一起设置
  40.         ctx.font="24px Helvetica";
  41.         //字体颜色
  42.         ctx.fillStyle = '#f6dda0';
  43.         function getTrueLength(str){ //获取字符串的真实长度（字节长度）
  44.             var len = str.length, truelen = 0;
  45.             for(var x = 0; x < len; x++){
  46.                 if(str.charCodeAt(x) > 128){
  47.                     truelen += 2;
  48.                 }else{
  49.                     truelen += 1;
  50.                 }
  51.             }
  52.             return truelen;
  53.         }
  54.         function cutString(str, leng){ //按字节长度截取字符串，返回substr截取位置
  55.             var len = str.length, tlen = len, nlen = 0;
  56.             for(var x = 0; x < len; x++){
  57.                 if(str.charCodeAt(x) > 128){
  58.                     console.log('汉字')
  59.                     if(nlen + 2 < leng){
  60.                         nlen += 2;
  61.                     }else{
  62.                         tlen = x;
  63.                         break;
  64.                     }
  65.                 }else{
  66.                     console.log('字符')
  67.                     if(nlen + 1 < leng){
  68.                         nlen += 1;
  69.                     }else{
  70.                         tlen = x;
  71.                         break;
  72.                     }
  73.                 }
  74.             }
  75.             return tlen;
  76.         }
  77.         for(var i = 1; getTrueLength(text) > 0; i++){
  78.    //分行
  79.             var tl = cutString(text, wordsNumOnline);
  80.             ctx.fillText(text.substr(0, tl).replace(/^\s+|\s+$/, ""), wordsLeft, i * lineheight + wordsTop);
  81.             text = text.substr(tl);
  82.         }
  84.         //转化成图片
  85.         var flagImg = document.createElement("img");
  86.         flagImg.src = cns.toDataURL("image/png");
  88.         $("#onlyoneImg").append(flagImg);
  89.         $('#canvas').addClass('hide');
  90.     }
  91. writeTextOnCanvas("canvas", 32, 40, '祝你新年快乐，万事如意');

有一点需要注意的：

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

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

发表评论

表情：
评论列表 （有 0 条评论，397人围观）

还没有评论，来说两句吧...

相关阅读