微信小程序canvas画图、文字、字体换行，以及保存图片到本地的坑

最新推荐文章于 2024-05-28 10:49:19 发布

时间飞逝子非鱼

最新推荐文章于 2024-05-28 10:49:19 发布

阅读量1w

点赞数 6

分类专栏：微信小程序

本文链接：https://blog.csdn.net/lgysjfs/article/details/82890732

版权

微信小程序专栏收录该内容

4 篇文章 0 订阅

订阅专栏

页面：

<canvas style="width: 376px; height: 530px; background-color:#ddd;position:absolute;left:-1000px;" canvas-id="myCanvas"></canvas>

步骤 1：网络图片，canvas画图必须先把图片下载到本地才可以使用

var ctx = wx.createCanvasContext('myCanvas');
wx.showLoading({
   title:'图片下载中'
})
wx.downloadFile({
    url:this.drawbg,
    success:(res)=>{
       var saveurl = res.tempFilePath;
       ctx.drawImage(saveurl, 0, 0, 376, 580);
       ctx.drawImage(this.code, 290, 423, 55, 55);
       //字体
       ctx.font = 'normal 11px sans-serif';
       ctx.setFontSize(16);
       ctx.setFillStyle('#fff');
       ctx.fillText(this.drawprecent + '，评测等级为', 25, 68);
       //字体换行
       this.drawText(ctx, this.drawcontent, 30, 350, 200, 307);
       ctx.draw(false,function(){                                
         wx.canvasToTempFilePath({ //生成图片
             x: 0,
             y: 0,
             quality:1,
             canvasId: 'myCanvas',
             success:  (res)=> {
                  wx.hideLoading();
                  var drawurl = res.tempFilePath;
                  wx.saveImageToPhotosAlbum({  //保存生成的图片到手机相册里
                     filePath: drawurl,
                        success(res) {
                           wx.showToast({
                               'title':'保存相册成功'
                           })
                        }
                  })
              }
          })
      });

字体换行的方法

drawText(ctx, str, leftWidth, initHeight, titleHeight, canvasWidth) {        
            var lineWidth = 0;        
            var lastSubStrIndex = 0; //每次开始截取的字符串的索引 
            for (let i = 0; i < str.length; i++) { 
                lineWidth += ctx.measureText(str[i]).width;            
                if (lineWidth > canvasWidth) {                
                    ctx.fillText(str.substring(lastSubStrIndex, i), leftWidth, initHeight); //绘制截取部分                
                    initHeight += 25; //16为字体的高度                
                    lineWidth = 0;                
                    lastSubStrIndex = i;                
                    titleHeight += 30;            
                }            
                if (i == str.length - 1) { //绘制剩余部分                
                ctx.fillText(str.substring(lastSubStrIndex, i + 1), leftWidth, initHeight);            
                }        
            }        // 标题border-bottom 线距顶部距离        
            titleHeight = titleHeight + 10;        
            return titleHeight    
        },

效果图：