小程序使用canvas标签生成海报并保存图片_小程序canvas生成图片-优快云博客

本文链接：https://blog.youkuaiyun.com/aaa123aaasqw/article/details/129622732

本文介绍了在微信小程序中如何使用canvas进行图形绘制，包括创建canvas标签，获取手机系统信息，缩放画布，绘制背景图、图片、文字等，并详细讲述了保存图片到手机相册的流程，涉及wx.canvasToTempFilePath、wx.getSetting和wx.saveImageToPhotosAlbum等API的使用。

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

先说一下做功能前的感受，简直一脸懵逼，第一次用canvas，只知道是个画布，其余什么都不知道…琢磨了一天才画出来…
开始之前百度了很久，想看看别人怎么写的，但是目前网上基本上用的都是wx.createCanvasContext这个api，但是这个api已经停止维护了，要求使用canvas代替，

https://developers.weixin.qq.com/miniprogram/dev/api/canvas/wx.createCanvasContext.html
上面是官方文档的出处，只好开始硬怼canvas文档，言归正传，下面是我的代码。
第一步是先创建canvas标签；

<canvas wx:if="{
  
  {isshow}}" type="2d" id="Canvas" canvas-id="Canvas" style="width: {
  
  { windowW }}px; height: {
  
  { windowH }}px;"></canvas>

第二步是获取手机系统信息，拿到手机屏幕的宽高以及设备像素比

  getSystemInfo() {
    let that = this
    wx.getSystemInfo({
      success: function (res) {
        console.log(res);
        that.setData({
          windowW: res.windowWidth,
          windowH: res.windowHeight,
          pixelRatio: res.pixelRatio
        })
      },
    })
  },

第三步是拿到canvas对象实例返回用于在画布上的环境，这里拿canvas节点实例用到wx.createSelectorQuery()这个api，拿到画布后就可以开始插入图片，绘制矩形等操作，这里要注意小程序要先缩放画布，如果不缩放，会导致画布过大不适应手机屏幕，canvas的像素单位是px，所以不能自适应屏幕，需要做换算，我换算的原理是设计稿的宽度是750，所以我按照设计稿的宽度进行换算，后来听我师傅说用rem也可以，但是懒得换了，就没换了哈哈哈。

  createcanvas: function () {
    this.setData({
      isshow: true
    })
    let that = this,
      windowW = that.data.windowW,
      windowH = that.data.windowH;
    const query = wx.createSelectorQuery() //获取对象实例
    query.select('#Canvas') //选择获取canvas对象实例
      .fields({ //获取节点的相关信息。需要获取的字段在fields中指定。
        node: true,
        size: true
      })
      .exec((res) => {
        console.log(res);
        const canvas = res[0].node //拿到canvas对象
        that.setData({ //这里保存canvas对象是因为下面保存相片要用这个对象
          canvas
        })
        const ctx = canvas.getContext('2d') //返回用于在画布上绘图的环境
        const dpr = that.data.pixelRatio //拿到设备像素比
        canvas.width = res[0].width * dpr //缩放画布
        canvas.heigh