【微信小程序】canvas生成分享图片海报模糊解决方法

利用展示(drawImage)和保存(canvasToTempFilePath)设置尺寸不同，保存设置正常图片像素的大小

一、制作正常页面显示海报，实际canvas画布生成二倍图隐藏，下载时缩小显示即可解决模糊问题。二倍海报图屏幕仅能展示一半。保存图为750*940，实际canvas大小应为375px*470px ，此处二倍画图设置canvas大小为750px*940px

代码如下：

<!--index.wxml-->
<view class="container">
    <view class="show">
      <image src="{{cardPath}}" alt="" class="card"></image>
      <text class="name">{{sendName}}</text>
      <image src="{{headPath}}" class="header"></image>
    </view>
    <view class="btn" bindtap="saveImage">保存图片</view>
    <view class="canvasBox" style="width:0;height:0;overflow: hidden;opacity:0;position:absolute;left:-750px;top:0;">
      <canvas canvas-id='myCanvas' style='width:750px;height:1000px;'></canvas>
    </view>
</view>

二、canvas绘图过程：文字居中显示时设置let x = ctx.width/2  画布宽度一半，设置文字时距离左边像素为x，既为中心位置

/*画图*/
  drawCanvas: function () {
    let that = this;
    let ctx = wx.createCanvasContext('myCanvas');
    let ctxW = 750;
    let ctxH =940;
    ctx.width = 750;
    ctx.height =940;
    let x = ctx.width / 2;//canvas宽的一半
 
    // 垂直渐变
    const grd = ctx.createLinearGradient(0, 0, 0, ctxH);
    grd.addColorStop(0, '#ffffff');
    grd.addColorStop(1, '#ffffff');
    ctx.setFillStyle(grd);
 
    ctx.fillRect(0, 0, ctxW, ctxH);
 
    wx.getImageInfo({
      src: that.data.cardPath,
      success: (res) => {
        ctx.drawImage(res.path, 0, 0, 750,940); //card
        
        ctx.setFontSize(32) //字体大小
        ctx.setFillStyle('red') //字体颜色
        ctx.textAlign = "center"; //文字居中
        ctx.fillText(that.data.sendName, x, 34)
        ctx.stroke();
 
        wx.getImageInfo({
          src: that.data.headPath,
          success: (res) => {
            ctx.save();
            ctx.beginPath(); //开始绘制
            ctx.arc(150,358,50, 0, 2 * Math.PI)
            ctx.fill()
            ctx.clip(); //剪切
            ctx.drawImage(res.path,100, 308, 100, 100); //userHeader  // 推进去图片必须是https
            ctx.restore(); //恢复之前保存的绘图上下文 继续绘制
            /**/ 
            ctx.save();
            ctx.draw();
          }
        })
 
      }
    })
  },

三、wx.canvasToTempFilePath(Object object, Object this)下载保存图片(重点在这里，设置正常宽高)

把当前画布指定区域的内容导出生成指定大小的图片。在 draw() 回调里调用该方法才能保证图片导出成功。

参数

/* 保存图片 */
  saveImage: function (e) {
    wx.canvasToTempFilePath({
      x: 0, //指定的画布区域的左上角横坐标	
      y: 0, //指定的画布区域的左上角纵坐标	
      width: 750, //指定的画布区域的宽度
      height: 940, //指定的画布区域的高度
      destWidth: 750, //输出的图片的宽度 
      destHeight: 940, //输出的图片的高度
      canvasId: 'myCanvas',
      fileType: 'jpg', //图片的质量，目前仅对 jpg 有效。取值范围为 (0, 1]，不在范围内时当作 1.0 处理。
      quality: 1,
      success: function (res) {
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success(result) {
            wx.showToast({
              title: '图片保存成功',
              icon: 'success',
              duration: 2000
            })
          }
        })
      }
    })
  },

tips：该文档解决两个问题

（1）文字居中显示

（2）生成图模糊

（3）圆形头像绘制，另一篇文档实际上线项目中手机端头像保存为空，此版本优化。

（6）canva绘制海报时可添加透明背景。
 

// 垂直渐变
const grd = ctx.createLinearGradient(0, 0, 0, ctxH);
grd.addColorStop(0, 'transparent');
grd.addColorStop(1, 'transparent');
ctx.setFillStyle(grd);