微信小程序 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）手機端保存圖片  當用戶拒絕保存申請時下次點擊按鈕無法自動調用新的授權申請，點擊按鈕無反應

　　此問題已解決網上有各種教程解決方法，當前隨筆未更新，只記錄圖片模糊問題，下個隨筆增加拒絕授權至重新授權過程