用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 查看内容

小程序实战(三)-生成二维码海报

Rolan 2020-6-3 00:52

一、需求说明 点击生成海报 海报有二维码 点击保存 可将海报保存到手机相册 二、需求实现 2.1 总体实现方式 这个需求的核心路径就是: 获取到图片路径 - 使用 canvas 画图 - 将 canvas 画布转换为 url - 将该图片 ...

一、需求说明

  1. 点击生成海报
  2. 海报有二维码
  3. 点击保存 可将海报保存到手机相册

二、需求实现

2.1 总体实现方式

这个需求的核心路径就是: 获取到图片路径 -> 使用 canvas 画图 -> 将 canvas 画布转换为 url -> 将该图片存储到手机相册

其中,各个步骤的实现方式如下:

  1. 获取到图片路径: 若是本地图片,可直接使用相对路径,如 '/images/poster-bg.png' 若是网络图片,或接口返回的图片,则需要先将图片下载到本地,获取到图片的路径,再使用。可使用 wx.getImageInfo实现

  2. 使用 canvas 画图: 在小程序中使用 canvas 与在正常 web 项目中不同。 正常项目中这样使用:

<canvas id="canvas-container"></canvas>
复制代码
let canvas = document.getElementById('canvas-container')
let ctx = canvas.getContext()
// 接下来使用 ctx 的 api 进行绘图
复制代码

而在小程序中,是无法直接使用 document.getElementById 这样的 api 操控 dom。因此,需要使用小程序专门提供的 api,用法如下:

<canvas canvas-id="canvas-container"></canvas>
复制代码
let ctx = wx.createCanvasContext('canvas-container')
// 接下来使用 ctx 的 api 进行绘图
复制代码
  1. 将 canvas 画布转换为 url 使用微信提供的 api,将完成的画布转换为 url:wx.canvasToTempFilePath

  2. 将该图片存储到手机相册 使用微信提供的 api,将图片保存在手机相册:wx.saveImageToPhotosAlbum


2.1 获取到图片路径

  1. 海报背景图 背景图片直接放进了代码的静态资源文件夹里。直接使用相对路径即可

  2. 二维码 二维码需要调用后端接口获得,并下载到本地获取临时路径。 调接口获取二维码路径并保存:

getPosterImage() {
	wx.showLoading({
    title: '正在制作海报。。。'
  })
	let that = this
	post(api.getQRImage).then(res => {
	  this.setData({
	    qrImageUrl: res.path
	  })
	  this.getImageInfo()
	})
}
复制代码

由于网络图片或接口返回图片,无法直接使用,需要下载到本地获取临时路径:

getImageInfo() {
	let that = this
	wx.getImageInfo({
		src: this.data.qrImageUrl,
		success: res => {
			that.drawPoster(res.path)
		}
	})
}
复制代码

2.2 使用 canvas 画图

  1. 增加 canvas 标签,设置为不可见
<!-- 通过 isShowPoster 控制画布是否显示 -->
<!-- 设置画布宽高 -->
<canvas canvas-id="poster-canvas" class="{{isShowPoster ? '' : 'no-display'}}" style="width:{{windowWidth}}px;height:{{posterHeight}}px;"></canvas>

<!-- 保存海报按钮,通过 isShowPoster 控制是否显示 -->
<button class="{{isShowPoster ? '' : 'no-display'}}" bindtap="handleSavePoster">保存海报</button>
复制代码
  1. 通过屏幕尺寸计算画布尺寸:
onLoad: function (options) {
	  // poster 的宽和高依据拿到的背景图宽高为准
    const poster = {
      "with": 375,
      "height": 587
    }
	  // 获取设备宽高信息 画布宽度等于屏幕宽度,画布高度按比例计算
    const systemInfo = wx.getSystemInfoSync()
    let windowWidth = systemInfo.windowWidth 
    let windowHeight = systemInfo.windowHeight
    let posterHeight = parseInt((windowWidth / poster.with) * poster.height)
    this.setData({
      windowWidth: windowWidth,
      posterHeight: posterHeight
    })
  }
复制代码
  1. 获取 canvas context 实例:
<canvas canvas-id="canvas-container"></canvas>
复制代码
drawPoster() {
	let ctx = wx.createCanvasContext('canvas-container')
}
复制代码
  1. 使用 ctx 实例的 api 绘图:
drawPoster() {
	let windowWidth = this.data.windowWidth
  let posterHeight = this.data.posterHeight
	let ctx = wx.createCanvasContext('canvas-container')
	// 绘制背景图
	ctx.drawImage(this.data.backgroundUrl, 0, 0, windowWidth, posterHeight, 0, 0);
	// 绘制二维码 
	// x坐标为 (画布宽度 - 二维码宽度) / 2
	// y坐标为 (画布高度 - 二维码高度 - 底部距离) 
  ctx.drawImage(this.data.qrImageUrl, (windowWidth - 60) / 2, posterHeight - 70, 60, 60, 0, 0);
	// 绘图
	ctx.draw()

	// 将画布设置为可见
	this.setData({
  	isShowPoster: true
	})
	wx.hideLoading()
}
复制代码

2.3 将 canvas 画布转换为 url

handleSavePoster() {
    wx.showLoading({
      title: '正在保存海报。。。'
    })
    let that = this
    setTimeout(function() {
      wx.canvasToTempFilePath({
        x: 0,
        y: 0,
        width: that.data.windowWidth,
        height: that.data.posterHeight,
        destWidth: that.data.windowWidth,
        destHeight: that.data.posterHeight,
        canvasId: 'poster-canvas',
        success: function (res) {
          that.setData({
            posterUrl: res.tempFilePath,
          })
          that.saveImageToAlbum()
        }
      })
    }, 500)
  }
复制代码

2.4 将该图片存储到手机相册

saveImageToAlbum() {
    let that = this;
    //将图片保存到相册       
    wx.saveImageToPhotosAlbum({
      filePath: that.data.posterUrl,
      success(res) {
        wx.hideLoading()
        wx.showModal({
          title: '保存成功',
          content: '图片成功保存到相册了,快去分享朋友圈吧',
          showCancel: false,
          confirmText: '好的',
          confirmColor: '#818FFB',
          success: function (res) {
			  // 保存成功,隐藏画布
            if (res.confirm) {
              that.setData({
                isShowPoster: false
              })
            }
          }
        })
      }
    })
  }

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: 张大鹅和郑小狗 来自: 掘金