时间：2023-07-22 00:15:01 | 来源：网站运营
时间：2023-07-22 00:15:01 来源：网站运营
canvas 绘制证书：最近公司的新项目要给参与答题的同学颁发一个奖状，老大说有公司有一套比较成熟的系统，但不是由前端来完成。我想了一下这东西用canvas就能搞定。之后就根据自己现有的知识来搞了一下。先上效果图
在线咨询
<template> <div> <canvas id="sz" width="800" height="600"></canvas> <button id="saveBtn" type="button" @click="saveImg">保存图片</button> </div></template>设置canvas的width和height属性，这个属性会决定你下载下来的图片的尺寸。 creatDarw() { //创建画板 let c1 = document.querySelector('#sz') let ctx = c1.getContext('2d') var img = new Image(); img.src = require("../assets/images/model.png") img.onload = function() { ctx.drawImage(img,0,0,800,600) ctx.font = "36px 微软雅黑"; ctx.fillStyle = "#EC5E37"; ctx.fillText("恭喜法外狂徒 张三 获得一等奖!",160,330); } } 好了绘制好的图片怎么让用户下载下来呢？这里我是利用a标签的download属性来实现的。saveImg() { //下载保存图片 /* let c1 = document.querySelector('#sz') let urlData = c1.toDataURL() let img = new Image() img.src = urlData; */ let downloadA = document.createElement('a'); downloadA.setAttribute('download','奖状') downloadA.href = urlData; downloadA.click() }移动端不能通过a 标签下载，一般是长按图片进行下载。但canvas不是image不能调起图片下载的接口，可以使用上面注释掉的内容在页面中append一张图片，把canvas画板删除掉，在页面上展示一张图片，进行图片的下载。关键词：证书,绘制
