微信小程序 canvas生成海报图片模糊问题

一、制作正常显示海报，生成二倍海报隐藏代码如下

<!--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>

/*css*/
.btn {
  width: 300rpx;
  height: 90rpx;
  line-height: 90rpx;
  text-align: center;
  color: #fff;
  font-size: 38rpx;
  border-radius: 10rpx;
  background: #f9c22e;
}
/*  */
.show{
  width:750rpx;
  height:1000rpx;
  background: #fff;
  border:1px solid red;
  position: relative;
}
.show .card{
  display: block;
  width:690rpx;
  height: 940rpx;
  margin:20rpx auto 0;
}
.show .name,.show .header{
  position: absolute;
}
.show .name{
  width:100%;
  text-align: center;
  color:red;
  top:26rpx;
}
.show .header{
  width:100rpx;
  height: 100rpx;
  border-radius: 100%;
  top:500rpx;
  left:100rpx;
}

二、canvas 画二倍图文字居中实际展示正常海报为375*470 绘制中生成图模糊（文字有锯齿边，图片模糊）。绘制过程中绘制二倍图大小750*940 并保存，则能解决该问题

let x = ctx.width / 2;//canvas宽的一半

//画图
  drawCanvas: function () {
    let that = this;
    let ctx = wx.createCanvasContext('myCanvas');
    let ctxW = 750;
    let ctxH = 1000;
    ctx.width = 750;
    ctx.height = 1000;
    let x = ctx.width / 2;

    // 垂直渐变
    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, 1000); //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();
          }
        })

      }
    })
  },

　　三、下载保存图片

// 保存图片
  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）圆形头像绘制，另一篇文档实际上线项目中手机端头像保存为空，此版本优化。

（4）页面加载完成绘制图形，实际项目中页面加载完成但接口数据不一定返回，所以绘图过程需在接口数据成功返回中调用，避免用户头像为空，绘图为空

（5）优化上一版本大量无用代码，全程使用线上数据代码

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

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

（7）手机端保存图片当用户拒绝保存申请时下次点击按钮无法自动调用新的授权申请，点击按钮无反应

　　此问题已解决网上有各种教程解决方法，当前随笔未更新，只记录图片模糊问题，下个随笔增加拒绝授权至重新授权过程

来源：oschina

链接：https://my.oschina.net/u/4269975/blog/4263019

标签

Grd

RED