【微信小程序-原生开发】实用教程20 - 生成海报(实战范例为生成活动海报,内含生成指定页面的小程序二维码,保存图片到手机,canvas 系列教程)

可在系列教程的基础上继续开发,也可以单独使用

【微信小程序-原生开发】系列教程

效果预览

【微信小程序-原生开发】实用教程20 - 生成海报(实战范例为生成活动海报,内含生成指定页面的小程序二维码,保存图片到手机,canvas 系列教程)_第1张图片

代码实现

点击触发生成海报

在活动详情页,指定点击某图标/按钮,触发跳转到生成海报的页面

pages\components\party\detail\index.js

  getPoster() {
    let detail = this.data.detail
    wx.navigateTo({
      url: '/pages/components/poster/index',
      success: function (res) {
        // 跳转页面时,将活动详情传递过去
        res.eventChannel.emit('sendData', {
          data: detail
        })
      }
    })
  },

海报页加载时接收参数,开始生成海报

pages\components\poster\index.js

  onLoad() {
    let that = this
    // 接收列表页传入的复杂数据--对象(详情)
    const eventChannel = this.getOpenerEventChannel()
    eventChannel.on('sendData', function (res) {
      that.setData({
        detail: res.data
      })
      wx.showLoading({
        title: '生成中',
      })
      //开始生成海报
      that.getPoster()
    })
  },

海报的绘制过程

海报通过Canvas进行绘制

1. 获取系统屏幕宽高,确定画布的宽高

  // 生成海报
  getPoster() {
    let that = this
    // 获取屏幕宽高
    wx.getSystemInfo({
      success(res) {
        that.drawCanvas(res.windowWidth, res.windowHeight)
      }
    })
  },

2. 创建Canvas对象,进行绘制,并生成图片

详见代码中的注释

<canvas class="canvasClass" id="mycanvas" type="2d" />
Page {
  background-color: black;
}

.canvasClass {
  width: 80%;
  height: 80vh;
  margin: 40rpx auto
}
  // 绘制海报
  drawCanvas(windowWidth, windowHeight) {
    let that = this;
    let detail = this.data.detail
    // 根据id查找到页面中的 canvas 标签,生成 Canvas 对象
    wx.createSelectorQuery()
    // # 后为页面中的 canvas 标签的 id 属性
      .select('#mycanvas')
      .fields({
        node: true,
        size: true
      })
      .exec(async (res) => {
        // 获取到 Canvas 对象
        const canvas = res[0].node
        // 渲染上下文
        const ctx = canvas.getContext('2d')

        // Canvas 画布的实际绘制宽高
        const width = windowWidth
        const height = windowHeight

        // 获取设备像素比
        const dpr = wx.getWindowInfo().pixelRatio

        // 清空画布
        ctx.clearRect(0, 0, width, height)

        // 初始化画布大小
        canvas.width = width * dpr
        canvas.height = height * dpr
        ctx.scale(dpr, dpr)

        // 绘制画布底色
        ctx.fillStyle = "white";
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // 解析活动封面图片
        let posterImgURL = detail.poster
        // 获取源图片宽高
        let posterImgInfo = await that.getImgInfo(posterImgURL)
        // 计算源图片的宽高比
        let posterImgRate = posterImgInfo.width / posterImgInfo.height
        // 计算出新的图片宽高(此处以宽为基准,按80%的宽等比例缩放图片)
        let newWidth = 0.8 * width
        let newHeight = 0.8 * width / posterImgRate

        // 绘制文本 -- 水平居中(活动名称)
        let text1 = detail.title;
        ctx.fillStyle = "black";
        ctx.font = "bold 25px 微软雅黑";
        let y1 = width / 10 + newHeight + 50
        ctx.fillText(text1, that.getTextxPosition(ctx, width, text1), y1);

        // 绘制文本 -- 水平居中(活动时间)
        let text2 = detail.date + ' ' + detail.week + ' ' + detail.time
        ctx.font = "15px 微软雅黑";
        let y2 = y1 + 30
        ctx.fillText(text2, that.getTextxPosition(ctx, width, text2), y2);

        // 绘制文本 -- 水平居中(活动地点)
        let text3 = detail.placeMark || detail.placeInfo.title
        ctx.font = "15px 微软雅黑";
        let y3 = y2 + 30
        ctx.fillText(text3, that.getTextxPosition(ctx, width, text3), y3);

        // 绘制文本 -- 水平居中
        let codeTips = "长按识别二维码报名";
        ctx.font = "20px bold";
        ctx.fillStyle = "green";
        let y4 = y3 + 40
        ctx.fillText(codeTips, that.getTextxPosition(ctx, width, codeTips), y4);

        // 绘制图片--活动封面图片
        let posterImg = canvas.createImage()
        posterImg.src = posterImgURL
        posterImg.onload = async () => {
          ctx.drawImage(posterImg, (width - newWidth) / 2, width / 10, newWidth, newHeight)

          // 绘制图片--小程序二维码
          const codeImg = canvas.createImage()
          // 异步生成小程序二维码
          codeImg.src = await that.initCodeImg()
          codeImg.onload = () => {
            let y5 = y4 + 20
            ctx.drawImage(codeImg, width / 3, y5, width / 3, width / 3)

            // 生成图片
            wx.canvasToTempFilePath({
              canvas,
              success: res => {
                wx.hideLoading()
                that.setData({
                  // 生成的图片临时文件路径
                  tempFilePath: res.tempFilePath
                })
              },
            })
          }
        }
      })
  },

技术要点一:画布的最终大小需要按设备像素比进行转换

        // Canvas 画布的实际绘制宽高
        const width = windowWidth
        const height = windowHeight

        // 获取设备像素比
        const dpr = wx.getWindowInfo().pixelRatio

        // 初始化画布大小
        canvas.width = width * dpr
        canvas.height = height * dpr
        ctx.scale(dpr, dpr)

技术要点二:需先清空画布后绘制底色

  • 为避免多次渲染导致累积层叠绘制,每次都需清空画布
  • 若未绘制底色,则最终保存的海报会是透明的(若想生成背景透明的海报,请删除绘制画布底色的代码)
        // 清空画布
        ctx.clearRect(0, 0, width, height)

        // 绘制画布底色
        ctx.fillStyle = "white";
        ctx.fillRect(0, 0, canvas.width, canvas.height);

技术要点三:保持图片的宽高比

        // 解析活动封面图片
        let posterImgURL = detail.poster
        // 获取源图片宽高
        let posterImgInfo = await that.getImgInfo(posterImgURL)
        // 计算源图片的宽高比
        let posterImgRate = posterImgInfo.width / posterImgInfo.height
        // 计算出新的图片宽高(此处以宽为基准,按80%的宽等比例缩放图片)
        let newWidth = 0.8 * width
        let newHeight = 0.8 * width / posterImgRate

此处需要异步解析图片,获取源图片的宽高,来计算宽高比

  // 获取图片信息
  getImgInfo(imgURL) {
    return new Promise((reslove) => {
      wx.getImageInfo({
        src: imgURL,
        success(res) {
          reslove(res);
        }
      })
    })
  },

通过返回 Promise ,方便借助 async和 await 将异步变同步,避免过多的代码嵌套。

技术要点四:绘制水平居中的文字

        // 绘制文本 -- 水平居中(活动名称)
        let text1 = detail.title;
        ctx.fillStyle = "black";
        ctx.font = "bold 25px 微软雅黑";
        let y1 = width / 10 + newHeight + 50
        ctx.fillText(text1, that.getTextxPosition(ctx, width, text1), y1);
  • fillText 的参数依次为:文本内容、文本的 x 坐标,文本的 y 坐标
  • 水平居中的 x 坐标计算方法为:(画布宽度-文本宽度)/ 2
  // 获取居中文本的x坐标
  getTextxPosition(ctx, ctxWidth, text) {
    let textWidth = ctx.measureText(text).width;
    let xPosition = ctxWidth / 2 - textWidth / 2;
    return xPosition
  },

技术要点五:绘制图片

        // 绘制图片--活动封面图片
        let posterImg = canvas.createImage()
        posterImg.src = posterImgURL
        posterImg.onload = () => {
          ctx.drawImage(posterImg, (width - newWidth) / 2, width / 10, newWidth, newHeight)
        }
  • 图片若是网络图片,则需等其异步加载完成后再绘制,所以后续生成图片等操作,都需在图片的 onload 函数中执行

技术要点六:生成小程序二维码

  // 生成小程序二维码
  async initCodeImg() {
    let {
      codeImgURL
    } = this.data

    if (!codeImgURL) {
      // 生成小程序二维码
      let codeImgID = await this.getCodeImg()
      // 云存储的图片,需要通过云id去换取外网访问链接
      let result = await wx.cloud.getTempFileURL({
        fileList: [codeImgID]
      })
      codeImgURL = result.fileList[0].tempFileURL
    }

    return codeImgURL
  },
  // 通过云函数,生成小程序二维码
  getCodeImg() {
    let detail = this.data.detail
    let params = detail._id
    return new Promise((resolve) => {
      wx.cloud.callFunction({
        name: 'get_codeImg', // 云函数的名称
        data: {
          // 页面路径
          path: 'pages/components/party/detail/index',
          // 参数
          params: params
        }
      }).then(res => {
        // 从云函数返回的结果中提取出目标数据
        resolve(res.result.fileID);
      })
    })
  },

云函数–生成小程序二维码

此处自定义的云函数名称为 get_codeImg

cloudfunctions\get_codeImg\index.js

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV
}) // 使用当前云环境

// 云函数入口函数
exports.main = async (event, context) => {
  const wxacodeResult = await cloud.openapi.wxacode.getUnlimited({
    // 页面路径
    page: event.path,
    // 参数
    scene: event.params,
  })
  let suffix = event.path.replace(/\//g, '_') + '_' + event.params
  // 在云存储生成图片
  const uploadResult = await cloud.uploadFile({
    // 图片存储路径
    cloudPath: `codeImgs/wxacode_${suffix}.jpg`,
    fileContent: wxacodeResult.buffer,
  })
  return uploadResult
}
  • 此处需注意,因参数通过 scene 场景值传递(且scene限定了长度,刚好和默认的 _id 值等长),在目标页面需添加代码识别该参数
  onLoad(options) {
    // 通过id获取详情(扫描小程序二维码时,id在scene里 )
    let id = options.id || options.scene
    if (id) {
      this.setData({
        id: id
      })
      this.getDetail()
      return
    }
}

技术要点七:将canvas转换为图片

此步可在 canvas 绘制后执行,也可以在点击保存海报时在执行

            // 生成图片
            wx.canvasToTempFilePath({
              canvas,
              success: res => {
                that.setData({
                  // 生成的图片临时文件路径
                  tempFilePath: res.tempFilePath
                })
              },
            })

保存图片到手机

点击保存按钮时执行

【微信小程序-原生开发】实用教程20 - 生成海报(实战范例为生成活动海报,内含生成指定页面的小程序二维码,保存图片到手机,canvas 系列教程)_第2张图片

<view class="btnBanner">
  <t-button style="margin-right: 40rpx;" block theme="light" capture-bind:tap="cancel" size="medium">取消t-button>
  <t-button block capture-bind:tap="saveImg" theme="primary" size="medium">保存t-button>
view>
.btnBanner {
  padding-top: 20rpx;
  display: flex;
  justify-content: space-evenly;
  margin: 0rpx 10%;
}
  //保存到手机相册
  saveImg() {
    wx.saveImageToPhotosAlbum({
      filePath: this.data.tempFilePath,
      success(res) {
        wx.showToast({
          title: '已保存到相册',
          icon: 'success',
          duration: 3000
        })
      }
    })
  },
  // 取消
  cancel() {
    wx.navigateBack()
  },

注意事项

  • 不同的海报,内容和布局不同,需要修改对应的 canvas 绘制代码

更多技巧

canvas 系列教程

微信小程序的 canvas 绘制已与 web 中 canvas 的绘制统一,相关的绘制技术,可参考

  • 01——直线、三角形、多边形、矩形、调色板_canvas调色板
    https://blog.csdn.net/weixin_41192489/article/details/124333306

  • 02——圆、弧线、圆角矩形、曲线(气泡、心形、N叶草)、扇形_canvas 半圆矩形
    https://blog.csdn.net/weixin_41192489/article/details/124339528

  • 03 —— 线的样式、绘制文本、操作图片(图片的渲染、缩放、裁剪、切割、平铺、特效)、变换元素(平移、缩放、旋转)_canvas putimagedata 缩放
    https://blog.csdn.net/weixin_41192489/article/details/124347589

  • 04 —— 渐变、阴影、路径、状态、Canvas对象、图形重叠模式_canvas strokerect
    https://blog.csdn.net/weixin_41192489/article/details/124375153

  • 05 ——交互、动画_canvas 交互
    https://blog.csdn.net/weixin_41192489/article/details/124388436

  • 06 ——边界检测、碰撞检测_canvas碰撞检测
    https://blog.csdn.net/weixin_41192489/article/details/124407221

  • 07 ——捕获、拖拽、抛掷、缓动动画、弹性动画_canvas管道动画
    https://blog.csdn.net/weixin_41192489/article/details/124415085

你可能感兴趣的:(#,微信小程序,#,已归档链接,微信小程序,生成小程序二维码,生成海报)