Vue + 原生Canvas实现生成电子证书的实践

Koen_Lee

已于 2023-04-27 17:32:10 修改

阅读量3.7k

点赞数 7

分类专栏：个人笔记文章标签：前端 javascript vue.js

于 2022-10-13 13:39:05 首次发布

本文链接：https://blog.csdn.net/m0_37406045/article/details/127287321

版权

本文记录使用Vue和原生Canvas实现电子证书生成的过程，包括背景图与文本的合成，Canvas的换行方法实现，以及图片的下载与上传处理。通过Canvas的drawImage和measureText方法动态绘制文字，实现文本的自动换行。最后讨论了图片转换、上传及下载的处理策略，以优化用户体验。

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

上次写完笔记后发现还是挺有用的，就考虑以后还是继续不定期记录一下，复盘之前开发过程中的思路并激发一些新的灵感，还是蛮不错的。

这次要记录的是之前做过的一个电子证书的小功能。需求非常非常简单，只需要把背景图和动态的文本合成并生成一个图片文件即可。当然，这个需求的实现方式有多种多样，最简单的直接html+css无脑堆样式然后用插件转换成图就行，也不会有任何性能问题。不过为了顺便复习一下我那吃灰吃的都快包浆了的Canvas的知识，这次就直接选择了Canvas渲染的方式。

大概就是下图这个样子👇

template结构很简单，一张隐藏的背景图，一个canvas标签，一个下载按钮，一个隐藏的合成后的证书图片。

接下来就是处理Canvas的内容，由于需要先加载背景图再渲染Canvas，这里将处理代码放在了背景图元素的onload事件中。

首先初始化Canvas，设置宽高等于背景图的宽高，并使用drawImage方法将背景图绘制在Canvas内。

mounted() {
    let canvas = document.getElementById('certificate')
    let ctx = canvas.getContext('2d')
    let backgroundImg = document.getElementById('background')


    backgroundImg.onload = async () => {
      this.$loading().close()
      canvas.width = backgroundImg.width
      canvas.height = backgroundImg.height
      //绘制背景
      ctx.drawImage(backgroundImg, 0, 0, canvas.width, canvas.height)
      ...
    }

    backgroundImg.onerror = () => {
      this.$toast('证书加载失败，请刷新重试')
    }
}

背景图绘制完成后就是最主要做的事了，将文字依次写在背景图上。

先定义一些字体样式相关的变量，供后续绘制文本使用。

mounted() {
    let canvas = document.getElementById('certificate')
    let ctx = canvas.getContext('2d')
    let backgroundImg = document.getElementById('background')


    backgroundImg.onload = async () => {
      this.$loading().close()
      canvas.width = backgroundImg.width
      canvas.height = backgroundImg.height
      //绘制背景
      ctx.drawImage(backgroundImg, 0, 0, canvas.width, canvas.height)
      //设置字体样式相关
      const paddingLeft = 220
      const fontSize = 60
      const indent = 2 * fontSize
      const plainTextStyle = {
        fontWeight: '350',
        fontSize: '60px',
        fontFamily: '微软雅黑',
        color: '#3D3D3D'
      }
      const boldTextStyle = {
        fontWeight: '700',
        fontSize: '60px',
        fontFamily: '微软雅黑',
        color: '#3D3D3D'
      }
      const titleTextStyle = {
        fontWeight: '500',
        fontSize: '65px',
        fontFamily: '微软雅黑',
        color: '#AF7128'
      }
      const smallTextStyle = {
        fontWeight: '350',
        fontSize: '50px',
        fontFamily: