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

请叫我小一

已于 2022-03-01 16:34:25 修改

阅读量4.1k

点赞数 2

分类专栏：小程序(微信+支付宝) 文章标签：微信小程序 javascript 前端

于 2022-03-01 16:33:53 首次发布

本文链接：https://blog.csdn.net/qq_38261819/article/details/123209283

版权

小程序(微信+支付宝) 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何使用微信小程序canvas在保持海报质量的同时，通过设置正确的画布尺寸和导出图片尺寸来避免模糊。重点讲解了文字居中、头像绘制和图片保存的优化方法，确保图片在下载时不失真。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

一、制作正常页面显示海报，实际canvas画布生成二倍图隐藏，下载时缩小显示即可解决模糊问题。二倍海报图屏幕仅能展示一半。保存图为750940，实际canvas大小应为375px470px ，此处二倍画图设置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);