canvas前端生成海报、二维码、截取节点生成图片

前言

在最近的项目中，有一个需求是要保存前端生成的二维码，同时需要在二维码上方显示课程名称或者活动名称，下方显示机构名称

这次前端分为PC管理端和uniapp移动端

1. PC端计划使用qrcode生成二维码，然后再用 html2canvas 将二维码和标题、机构名称html元素保存成图片
2. 移动端计划使用DCloud提供的 uni-qrcode 组件来生成二维码，然后使用 mosowe-canvas-image 来保存成图片

为什么使用qrcode而不用vue-qr

vue-qr可以在二维码中间加logo，而qrcode不可以。但是我们不必要使用带logo的二维码
实现上来说vue-qr还是要简单一些的，但是自己更加习惯使用qrcode

实现

PC端

1.引入qecode、html2canvas

npm install qrcodejs2	// 安装qrcode
npm install --save html2canvas	// 安装html2canvas

在需要的页面中引入

import QRCode from 'qrcode'
import html2canvas from 'html2canvas'

2.生成二维码

// 判断活动状态，未结束就调用生成二维码
showQRCode(data) {
   
  if (data.overTime < data.createTime) {
   
    this.$message({
   
      message: '该活动已结束',
      type: 'warning'
    })
    return false
  }
  const toSignAd = ''
  this.$nextTick(() => {
   
    this.makeQrcode(toSignAd, data)
  })
}

// 生成二维码
makeQrcode(str, data) {
   
  QRCode.toDataURL(str, {
    width: 250, margin: 1 }).then(res => {
   
    // toDataURL方法返回一个promise
    this.$set(data, 'imgSrc', res)
  })
}

3.保存图片

a标签download属性可以实现下载

定义和用法
download 属性规定被下载的超链接目标。
在 标签中必须设置 href 属性。

该属性也可以设置一个值来规定下载文件的名称。所允许的值没有限制，浏览器将自动检测正确的文件扩展名并添加到文件 (.img, .pdf, .txt, .html, 等等)。

// 保存图片
onSave() {
   
   const _this = this
   html2canvas(_this.$refs.testImg).then(canvas => {
   
     const imgUrl = canvas.toDataURL('image/png')
     var eleLink = document.createElement('a'