H5 Canvas实现荣誉证书生成器

已于 2023-10-18 08:47:39 修改
阅读量4.8k 收藏 23
点赞数 7
分类专栏： H5 文章标签： html5
于 2022-04-24 15:42:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/linyisonger/article/details/124381824
版权

H5 Canvas实现荣誉证书生成器

没人跟我颁奖，那就自己给自己颁一个吧~

预览

在线链接 https://linyisonger.github.io/H5.Examples/?name=./022.%E8%AF%81%E4%B9%A6%E7%94%9F%E6%88%90%E5%99%A8.html
源码地址 https://github.com/linyisonger/H5.Examples

功能点
  • 印章绘制
    • QQ 浏览器 PC
  • 个性化编辑
    • QQ 浏览器 PC
  • 延迟预览
    • QQ 浏览器 PC
  • 点击下载
    • QQ 浏览器 PC

写法上没有做很多兼容性的处理，大概写了一下逻辑。

效果

image

代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .preview {
            position: relative;
            display: inline-block;
        }

        img {
            width: 768px;
        }


        .name,
        .detail,
        .date,
        .orgs,
        .colon {
            position: absolute;
            font-family: "Microsoft YaHei"
        }

        .name {
            top: 183px;
            left: 102px;
            width: 255px;
            font-size: 27px;
            line-height: 36px;
            background-color: transparent;
            border-bottom-width: 2px;
            border-bottom-color: #999;
            border-top-width: 0;
            border-left-width: 0;
            border-right-width: 0;
            text-align: center;
            outline: none;
        }

        .colon {
            top: 190px;
            left: calc(107px + 255px);
            font-size: 27px;
            font-family: Arial, Helvetica, sans-serif;
            font-weight: bold;
        }

        .detail {
            top: 237px;
            left: 94px;
            height: 90px;
            width: 559px;
            background-color: transparent;
            resize: none;
            border: none;
            font-size: 22px;
            letter-spacing: 4px;
            outline: none;
            text-indent: 50px;
        }

        .date {
            top: 432px;
            right: 130px;
            font-size: 14px;
            line-height: 36px;
            background-color: transparent;
            border: none;
            outline: none;
        }

        .orgs {
            top: 356px;
            right: 147px;
            width: 180px;
            background-color: transparent;
            resize: none;
            border: none;
            font-size: 14px;
            outline: none;
            text-align: justify;
            height: 80px;
        }
    </style>
</head>

<body>
    <div class="preview">
        <img src="./assets/certificate-1.jpg">
        <input class="name" type="text" placeholder="获奖人" />
        <span class="colon">:</span>
        <textarea class="detail" placeholder="获奖成就"></textarea>
        <textarea class="orgs" placeholder="颁发机构"></textarea>
        <input class="date" type="text" placeholder="获奖日期" />
    </div>
    <canvas id="seal" width="200" height="200" style="opacity: 0;"></canvas>
    <canvas id="preview" width="768" height="531"></canvas>
    <script>
        let certificate = document.getElementsByTagName('img').item(0);

        /**
         * 印章的生成
         */
        function seal(s) {
            // 防止转圈圈
            if (!s) return;
            let c = document.getElementById("seal");
            let ctx = c.getContext("2d");
            ctx.clearRect(0, 0, c.clientWidth, c.clientHeight);
            ctx.fillStyle = "rgb(196,38,29)";
            ctx.strokeStyle = "rgb(196,38,29)";
            // 印章的外框
            ctx.beginPath();
            ctx.lineWidth = 4;
            ctx.arc(100, 100, 96, 0, 2 * Math.PI);
            ctx.stroke();
            // 星星的生成
            ctx.beginPath();
            ctx.lineWidth = 1;
            let star_start_x = 76;
            let star_start_y = 88;
            ctx.moveTo(star_start_x, star_start_y)
            ctx.lineTo(star_start_x + 20, star_start_y)
            ctx.lineTo(star_start_x + 20 + 7, star_start_y - 20)
            ctx.lineTo(star_start_x + 20 + 7 + 6, star_start_y)
            ctx.lineTo(star_start_x + 20 + 7 + 6 + 20, star_start_y)
            ctx.lineTo(star_start_x + 20 + 7 + 6 + 20 - 16, star_start_y + 13)
            ctx.lineTo(star_start_x + 20 + 7 + 6 + 20 - 16, star_start_y + 13)
            ctx.lineTo(star_start_x + 20 + 7 + 6 + 20 - 16 + 5, star_start_y + 13 + 20)
            ctx.lineTo(star_start_x + 20 + 7 + 6 + 20 - 16 + 5 - 16, star_start_y + 20)
            ctx.lineTo(star_start_x + 20 + 7 + 6 + 20 - 16 + 5 - 16 - 18, star_start_y + 13 + 20)
            ctx.lineTo(star_start_x + 20 + 7 + 6 + 20 - 16 + 5 - 16 - 18 + 6, star_start_y + 13)
            ctx.closePath()
            ctx.fill();
            // 印章上旋转的文字
            ctx.translate(100, 100);
            ctx.font = '26px Helvetica';
            let angle = 4 * Math.PI / (3 * (s.length - 1));
            for (var i = 0; i < s.length; i++) {
                let c = s[i];
                if (i == 0) ctx.rotate(.8 * Math.PI);
                else ctx.rotate(angle);
                ctx.save();
                ctx.translate(70, 0);
                ctx.rotate(Math.PI / 2);
                ctx.fillText(c, 0, 5);
                ctx.restore();
            }
            // 归位
            ctx.rotate(-angle * (s.length - 1));
            ctx.rotate(-.8 * Math.PI);
            ctx.translate(-100, -100);

            return c.toDataURL()
        }
        // 预览
        function preview(name, detail, orgs, date) {
            let c = document.getElementById("preview");
            let ctx = c.getContext("2d");
            console.log(certificate);
            // 证书背景
            ctx.drawImage(certificate, 0, 0, c.clientWidth, c.clientHeight);
            console.log("certificate.onload");
            // 获奖人
            ctx.font = "22px Microsoft YaHei";
            ctx.textAlign = "center";
            ctx.textBaseline = "top";
            ctx.fillText(name, 102 + 255 / 2, 183);
            // 冒号
            ctx.textAlign = "right";
            ctx.fillText(":", 102 + 255, 183);
            // 获奖人底线
            ctx.beginPath();
            ctx.moveTo(102, 220)
            ctx.lineTo(102 + 245, 220)
            ctx.stroke();

            // 获奖成就
            let detailX = 147;
            let detailY = 237;

            ctx.font = "22px Microsoft YaHei";
            ctx.textAlign = "left";
            ctx.textBaseline = "top";
            for (let i = 0; i < detail.length; i++) {
                detailX += 32;
                if (detailX > 640) {
                    detailX = 115;
                    detailY += 32;
                }
                ctx.fillText(detail[i], detailX, detailY);
                if (detail.charCodeAt(i) <= 255) detailX -= 16
            }

            // 颁发机构 
            let orgX = c.clientWidth - 147 - 180;
            let orgY = 356

            ctx.font = "14px Microsoft YaHei";
            ctx.textAlign = "left";
            ctx.textBaseline = "top";

            let orgArr = orgs.split(/\n/).map(o => o.trim());

            for (let i = 0; i < orgArr.length; i++) {
                ctx.fillText(orgArr[i], orgX, orgY);
                orgY += 30;

                let img = new Image();
                img.src = seal(orgArr[i]);
                img.onload = function () {
                    ctx.drawImage(img, c.clientWidth - 220 - i * 110, 350, 100, 100);
                }
            }
            // 绘制获奖日期
            ctx.font = "14px Microsoft YaHei";
            ctx.textAlign = "left";
            ctx.textBaseline = "top";
            ctx.fillText(date, c.clientWidth - 130 - 153, 450);

        }

        let timeoutId = null;

        let nameDom = document.querySelector('.name');
        let detailDom = document.querySelector('.detail');
        let orgsDom = document.querySelector('.orgs');
        let dateDom = document.querySelector('.date');


        nameDom.addEventListener('input', checkPreview)
        detailDom.addEventListener('input', checkPreview)
        orgsDom.addEventListener('input', checkPreview)
        dateDom.addEventListener('input', checkPreview)


        // 检查是否需要渲染
        function checkPreview() {
            let name = nameDom.value;
            let detail = detailDom.value;
            let orgs = orgsDom.value;
            let date = dateDom.value;
            clearTimeout(timeoutId);
            // 允许渲染
            if (name.trim() && detail.trim() && orgs.trim() && date.trim()) {
                timeoutId = setTimeout(() => {
                    console.log("渲染");
                    console.log(name, detail, orgs, date);
                    preview(name, detail, orgs, date)
                }, 1000);
            }
        }

        // 示例
        function sample() {
            nameDom.value = `林一怂儿`;
            detailDom.textContent = "在2021年全国优秀文章中，你以优秀的错别字数量，以及非常离谱的Bug，遥遥领先。特发此证，以资鼓励。";
            orgsDom.textContent = `全国文章错别字核查中心\n全国离谱到家委员会`
            dateDom.value = "2021年12月"
            checkPreview()
        }


        let previewDom = document.getElementById("preview");
        // 下载
        function download() {
            let a = document.createElement('a');
            a.href = previewDom.toDataURL();
            a.download = "荣誉证书.png";
            a.click();
        }

        previewDom.addEventListener('click', this.download)


        certificate.onload = function () {
            sample();
        }

    </script>
</body>

</html>

奇怪的知识点又增加啦~

林一怂儿
关注
  • 7
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
Vue + 原生Canvas实现生成电子证书的实践
m0_37406045的博客
10-13 3167
上次写完笔记后发现还是挺有用的，就考虑以后还是继续不定期记录一下，复盘之前开发过程中的思路并激发一些新的灵感，还是蛮不错的。 这次要记录的是之前做过的一个电子证书的小功能。需求非常非常简单，只需要把背景图和动态的文本合成并生成一个图片文件即可。当然，这个需求的实现方式有多种多样，最简单的直接html+css无脑堆样式然后用插件转换成图就行，也不会有任何性能问题。不过为了顺便复习一下我那吃灰吃的都快包浆了的Canvas的知识，这次就直接选择了Canvas渲染的方式。
荣誉证书生成器（三好学生证，搞笑等）
12-09
方便制作荣誉证书，生成后，打印即可。 无聊的时候做个搞笑的证书给好友岂不是很悠闲。
certifiacte-generator：在线证书生成器
02-18
certifiacte-generator：在线证书生成器
certificate-generator:Certificate-Generator是一个工具，可以帮助用户使用相同的模板生成大量证书，但只需3个简单的步骤即可对数据进行一些更改
05-02
证书生成器 证书生成器是一个实用程序，可帮助您生成具有相同格式但数据不同的大量证书。 对于仅在内容上进行一些更改的任何想要生成相同类型证书的人，它都是有帮助的。 功能性 首先上传CSV。 上载模板。 选择图像上的点，然后使用诸如列名，字体大小和颜色之类的值映射坐标。 用户选择所有点后，生成预览以显示。 用户验证预览，然后单击全部生成。 所有数据都发送到后端，并且将生成证书。 我们将提供邮寄证书或下载文件的选项。 安装 先决条件： 已安装Python3.x。 从这里获取-> 安装：从项目的根目录运行以下命令- pip install -r requirements.txt 测验 从产品的根目录运行以下命令- python manage.py makemigrations python manage.py migrate python manage.py runserver
canvas绘图底图+文字，canvas绘制证书
最新发布
qq_46490956的博客
06-18 169
canvas绘制证书，底部图片+文字渲染，竖向排列文字日期转大写等处理
【基于若依实现的证书生成系统】SpringBoot+vue
小哲代码的博客
12-28 821
HTML5 元素用于图形的绘制，基于若依实现的证书生成系统通过脚本 (通常是JavaScript)来完成.使用ruoyi做后台系统，进行管理，实现权限，用户，和参数持久化，方便用户持久使用。你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。 标签只是图形容器，您必须使用脚本来绘制图形。这个图其实动态的，我们将需要动态变化的数据进行，动态传进去。可以实现自动生成图片根据对应的关键字。artistName, 艺术家的名字。,pieces_time,时间。
掌握Laravel开发的利器——Canvas代码生成器
gitblog_00087的博客
06-01 396
掌握Laravel开发的利器——Canvas代码生成器 项目地址:https://gitcode.com/orchestral/canvas 当你在使用Laravel进行应用或包的开发时，是否曾为重复的手动创建控制器、模型或迁移文件而感到困扰？现在，有一款名为Canvas的强大工具可以帮助你自动化这个过程，它能复刻Laravel中的所有make艺术命令，并且允许你在非Laravel安装环境和自定义...
java使用itextpdf生成PDF批量打印荣誉证书（指定位置输出文字）
qq_29062045的博客
07-03 3497
       最近公司项目有个需求，批量打印荣誉证书，一开始尝试过传统的Web打印，控件打印，js调用浏览器打印方法，遇到各种问题，比如定位不准，分页问题，缩放问题等。然后就自己研究，整理了一套打印方案，项目已测试通过，现在把这一成果分享给大家。下面，我会提供一个工具类，这个工具类里，会有两种打印方案：一.  把要打印的内容，放到html代码中，然后解析html（虽然支持解析样式，由于支持的样式非...
HTML5印章绘制电子签章图片(中文英文椭圆章、中文英文椭圆印章)
迷失蒲公英
02-25 3001
这篇文章主要介绍了HTML5印章绘制电子签章图片(中文英文椭圆章、中文英文椭圆印章),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。本文介绍方式1，方式2待后续发布，方式1本来想用java实现印章图片生成，虽然网上有很多现成代码，但需要调整印章图片大小达到规范，印章大小：圆形印章尺寸43mm。椭圆章的曲线文字比较难搞，虽然网上有JQ的js可以直接生成曲线字符排列，但是却无法转换成canvas。
生成证书模板---vue实现HTML转PDF
Java领域优质创作者，华为云享专家
10-08 5372
vue生成证书模板并支持图片下载和PDF下载
一款黑科技小工具证书打印工具（直接免费生成奖状）
06-11
软件已经内置了奖状模板，非常经典的款式，只需要自定义输入编号、获奖者名称、获奖评语、名词、颁奖单位等，点击确定之后它会自动生成完整的奖状。可以单张打印和批量打印，还可以批量导入excel获奖名单，点击打印预览进入预览界面，如果预览没有问题点击右上方的打印，就可以将该奖状以PDF的形式保存到本地了，非常的方便！
荣誉证书生成器（娱乐生活）
04-20
可生成各种荣誉证书，是上网聊QQ，居家生活必备软件！
荣誉证书模板，可直接打印
12-25
荣誉证书模板，可直接打印。荣誉证书模板，可直接打印。
超级搞笑证件生成器源码（C#）
05-22
模拟网络上面非常流行的搞笑证件生成器，不仅保留了原有的功能，还拓展了许多其他的接口！很值得学习哦，着可是本人花了近一天一夜完成的哦！超值！
易语言证件生成器源码-易语言
06-13
易语言证件生成器源码
h5 canvas实现乒乓球的效果
08-02
本项目“h5 canvas实现乒乓球的效果”就是利用Canvas的强大功能，模拟了一个类似打乒乓球的游戏场景。 首先，我们要理解Canvas的基本用法。在HTML中，创建一个Canvas元素很简单，只需要在页面中添加`<canvas id=...
Canvas三角图形背景生成器代码
06-24
为了实现背景生成器的效果，我们需要生成多个随机位置和颜色的三角形。可以创建一个函数来生成随机三角形，并在循环中调用该函数多次： ```javascript function generateTriangle() { var x1 = Math.random() * ...
JS+H5 Canvas实现时钟效果
10-18
这两个变量（`canvas`和`context`）是实现时钟功能的核心。 `draw()`函数是核心方法，它负责绘制时钟。我们首先获取当前时间，然后计算小时、分钟和秒的角度值，因为Canvas中的弧度绘制是基于角度的。例如，一个...
UniApp H5端用canvas生成图片保存本地
05-19
UniApp H5端可以使用HTML5的canvas标签来生成图片并保存到本地。具体实现步骤如下： 1. 在H5端页面中，首先需要在template中添加一个canvas标签，用于绘制图片： ``` <template> <canvas id="myCanvas"></canvas> </template> ``` 2. 在script中，获取canvas元素，并使用canvas API进行绘制。例如，绘制一张红色的矩形： ``` <script> export default { mounted() { // 获取canvas元素 const canvas = document.getElementById('myCanvas') // 获取绘图上下文 const ctx = canvas.getContext('2d') // 绘制矩形 ctx.fillStyle = 'red' ctx.fillRect(0, 0, canvas.width, canvas.height) } } </script> ``` 3. 绘制完成后，可以将canvas元素转化为图片，并保存到本地。可以使用canvas.toDataURL()方法将canvas转化为base64格式的图片数据，然后创建一个a标签并设置其href属性为图片数据，再调用a标签的click()方法触发下载。例如： ``` <script> export default { mounted() { // 获取canvas元素 const canvas = document.getElementById('myCanvas') // 获取绘图上下文 const ctx = canvas.getContext('2d') // 绘制矩形 ctx.fillStyle = 'red' ctx.fillRect(0, 0, canvas.width, canvas.height) // 将canvas转化为base64格式的图片数据 const imgData = canvas.toDataURL('image/png') // 创建a标签并设置href属性为图片数据 const link = document.createElement('a') link.href = imgData // 设置下载文件名 link.download = 'myImage.png' // 触发下载 link.click() } } </script> ``` 通过以上步骤，就可以在UniApp H5端使用canvas生成图片并保存到本地了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

林一怂儿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值