HTML使用canvas绘制海报（网络图片）
生成前：
生成后：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>媒体参会嘉宾邀请函生成链接</title><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.10/lib/index.css" /><style>#app {width: 100vw;position: relative;}* {margin: 0;padding: 0;}[v-cloak] {display: none;}.bg {width: 100vw;height: 100vh;min-height: 100vh;position: relative;overflow: hidden;}#scream {width: 100%;height: 100%;}.closeImg {width: 34px;height: 34px;}.pop {position: absolute;top: 0;left: 0;height: 100%;width: 100%;background: rgba(0, 0, 0, 0.6);z-index: 98;}.saveImg {width: 100%;display: block;}.popImg {width: 100%;position: absolute;top: 0;left: 0;z-index: 9999;}.popImgClose {width: 100%;height: 100px;line-height: 100px;position: fixed;top: 0;left: 0;z-index: 19999;font-size: 36px;font-weight: 500;color: #fff;text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);letter-spacing: 4px;text-align: center;background: rgba(0, 0, 0, 0.6);}.flex-between {display: flex;align-items: center;justify-content: space-between;padding: 0 30px;}.inputName {max-width: 100%;border: none;background: transparent;font-size: 100px;font-family: Source Han Sans CN;font-weight: bold;color: #2274F6;position: absolute;left: 50%;top: 30.9%;transform: translate(-50%, -30.9%);text-align: center;outline: transparent;z-index: 1;}.inputName::-webkit-input-placeholder {color: #2274F6;}.inputName::-moz-placeholder {color: #2274F6;}.inputName::-moz-placeholder {color: #2274F6;}.inputName::-ms-input-placeholder {color: #2274F6;}#myCanvas {position: absolute;left: -9999px;top: -9999px;}.createImg {width: 200px;height: 200px;line-height: 200px;top: 50%;right: 10px;border-radius: 50%;position: fixed;font-size: 36px;font-family: PingFang SC;font-weight: bold;color: #fff;background: rgba(0, 0, 0, 0.5);opacity: 1;z-index: 9;text-align: center;}.van-notify {padding: 30px 20px;font-size: 40px;}</style></head><body><div id="app" v-cloak><img id="scream" :src="imgSrc+'?a='+new Date().getTime()" alt="The Scream" @load="afterLoad"><input autofocus="autofocus" type="text" name="input_name" v-model="name" class="inputName" maxlength="8"placeholder="点击输入姓名" /><div v-on:click='canvas' class="createImg">点击生成</div><canvas id="myCanvas" :width="imgWidth" :height="imgHeight" ref="canvas">您的浏览器不支持 HTML5 canvas 标签。</canvas><div class="pop" v-if='showImg' v-on:click="showImg = false"></div><div class="popImgClose" v-if='showImg'><div class="flex-between"> <span>长按保存至相册，关闭此行可重新输入姓名生成</span><img :src="closeImg" class="closeImg" v-on:click="showImg = false" alt=""></div></div><div class="popImg" v-if='showImg'><img class="saveImg" :src="saveImg" alt=""></div></div><script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script><script src="https://unpkg.com/axios/dist/axios.min.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/vant@2.10/lib/vant.min.js"></script><script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js" type="text/javascript"></script><script>new Vue({el: '#app',data: {context: {}, //canvasimgHeight: '1503', //图片高度imgWidth: '750', //图片高度name: '',saveImg: '', //保存图片showImg: false, //显示图片closeImg: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADEAAAAxCAMAAABEQrEuAAAAzFBMVEUAAAD///86kuEIAAAARHRSTlMAAQIDBAUGBxcYGhshIiRLTVBUVVdZW2lwcnN0dXeEhYiLjI2VlpeYmZqcnZ6foKGjpKanqKmrrK2ur7CztbbBxMXIzKPOVfAAAAHqSURBVEjHnZZ5W8IwDMZZr6l4X3hfoBPBDSZzoODBvv93soMm6452e9xfaZvf2jTp27Za//g2Orf7TgM/snfT2UyN3Z8kSQK3FhDP0u97S1pnSfr1RQ3Aeyu/K2l2kyaIeFy73Uv7ZG0mgQ0RL8rrVDboUDUG3LykJ/gtSZtuHxDTLNxTHkO1QQKQcTXCXwHAcRHApKwCYBDDWEuBGABSjoUD4OdyxgGJiggfAVBYshirgZDm+qmv+t9KMWIsoR4L8y2bwgCZZQibAFCZKx6p4ZhAtYaq592QKQ4OMc0DkbGAKLgsUoR8AMDMBcdmymnutJypsj+5rahZDAgBYMZrjiYgSwBo3eGki0T/vli9ANC5BixYE21xMmRBmskRgRiWvBmA26pl3z7DVIsjbhAHZrpUliYgLOQjrMkHw8rikMrQXiSTbFsx+5EFwSO6yjSWZWCMhfv5cHGJJoFF1cDiw/NSLX0oZNp5wINcpckoZLlAeWDUZNTWwhFFhSnGgupdUg2UvvyVJDxziKjJfbfiBqoUMtTkoVu4FKu0NS+wnhoXPYN6ZwhcSd5qFuLVARoySJED1RjZHgEuXK/HsnGn0RZEraQr7fPCpWha2Bq5luZOw3eJm27y73Zqti+6R43ePocPl+3/PK7+AKHzueY3wvW7AAAAAElFTkSuQmCC',imgSrc: 'https://eventimg.oss-cn-shen.aliyuncs.com/jintuoluo/invitation/invitation_2023.jpg',//海报背景toast: null},created() {this.toast = vant.Toast.loading({duration: 0, // 持续展示 toastforbidClick: true,message: '加载中...',});},methods: {canvas() {if (!this.name) {this.$notify({background: "#831E21",message: '请输入姓名',});return}let imgs = new Image();imgs.setAttribute('crossorigin', 'anonymous');//解决网络图片跨域的问题imgs.src = this.imgSrc;let imgWidth = 0,imgHeight = 0,that = this;//获取图片宽高imgs.onload = function() {imgWidth = imgs.widthimgHeight = imgs.heightconst canvas = that.$refs.canvasthat.context = canvas.getContext("2d");that.context.drawImage(imgs, 0, 0, that.imgWidth, that.imgHeight);that.context.save();that.context.font = "bold 76px Source Han Sans CN";that.context.textAlign = "center";that.context.fillStyle = "#2274F6"that.context.fillText(that.name, that.imgWidth / 2, 516, 600);that.context.save();document.body.scrollTop = document.documentElement.scrollTop = 0var base64Img = canvas.toDataURL('image/jpeg');that.showImg = true;that.saveImg = base64Img;};},afterLoad() {vant.Toast.clear();},},})</script></body></html>
相关文章：
HTML使用canvas绘制海报（网络图片）
生成前： 生成后： <!DOCTYPE html> <html><head><meta charset"utf-8"><title>媒体参会嘉宾邀请函生成链接</title><link rel"stylesheet" href"https://cdn.jsdelivr.net/npm/vant2.10…...
20道高频JavaScript面试题快问快答
※其他的快问快答，看这里！ 10道高频Qiankun微前端面试题快问快答 10道高频webpack面试题快问快答 20道高频CSS面试题快问快答 20道高频JavaScript面试题快问快答 30道高频Vue面试题快问快答 面试中的快问快答 快问快答的情景在面试中非常常见。 在面试过…...
【STM32】HAL库UART含校验位的串口通信配置BUG避坑
【STM32】HAL库UART含校验位的串口通信配置BUG避坑 文章目录 UART协议校验位HAL库配置含校验位的串口配置BUG避坑附录：Cortex-M架构的SysTick系统定时器精准延时和MCU位带操作SysTick系统定时器精准延时延时函数阻塞延时非阻塞延时 位带操作位带代码位带宏定义总线函…...
Python实用技巧：将 Excel转为PDF
将Excel文件转换为PDF可以方便储存表格数据，此外在打印或共享文档时也能确保表格样式布局等在不同设备和操作系统上保持一致。今天给大家分享一个使用第三方Python库Spire.XLS for Python 实现Excel转PDF的简单方法。 实现步骤 首先，通过pip命令来安装依…...
【面经】讲一下你对jvm和jmm的了解
JVM JVM是Java虚拟机，是Java程序的执行环境。它是一种虚拟的计算机，通过在实际的计算机上仿真模拟各种计算机功能来实现. JVM是Java程序运行的核心，可以将Java字节码转换为可执行的机器码，提供了跨平台性、优秀的垃圾回收器&…...
《网络协议》03. 传输层（TCP UDP）
title: 《网络协议》03. 传输层（TCP & UDP） date: 2022-09-04 22:37:11 updated: 2023-11-08 15:58:52 categories: 学习记录：网络协议 excerpt: 传输层、UDP、TCP（可靠传输，流量控制，拥塞控制…...
ZooKeeper调优
服务器硬件配置 建议 Zookeeper 的服务器最好专属（或是资源隔离的）。磁盘由于 Zookeeper 的数据写入磁盘，强烈建议要使用 SSD。 Linux操作系统优化 Zookeeper 的性能会很明显受到交换分区的影响。建议部署 Zookeeper 的服务器关闭交换分区功能或是通过内核参数调整，减少…...
改进YOLOv5：结合ICCV2023｜动态蛇形卷积，构建不规则目标识别网络
🔥🔥🔥 提升多尺度、不规则目标检测，创新提升 🔥🔥🔥 🔥🔥🔥 捕捉图像特征和处理复杂图像特征 🔥🔥🔥 👉👉👉: 本专栏包含大量的新设计的创新想法，包含详细的代码和说明，具备有效的创新组合，可以有效应用到改进创新当中 👉👉👉: �…...
开发知识点-NodeJs-npm/Pnpm/Vite/Yarn包管理器
包管理器 vue-cli-service 不是内部或外部命令，也不是可运行的程序npm 全局变量pnpmPnpm介绍ViteYarn ‘vue-cli-service’ 不是内部或外部命令，也不是可运行的程序 yarn yarn add vue-amap yarn add vue-amap ant-design-vue npm 全局变量 换主机 新…...
Mac上好用的翻译软件推荐 兼容m
Mac翻译软件可以用在学习，工作，生活当中，一款好用的翻译软件，具有翻译准确，翻译快速等基本特点，能够帮您提高工作效率。Mac上有什么好用的翻译软件呢？今天小编为大家整理了6款好用的Mac翻译软件…...
软件下载网站
1.qt 下载官网 Index of /new_archive/qt 2.qt-vs 插件下载 Index of /official_releases/vsaddin...
java获取近期视频流关键帧与截图
1、背景 最近在做视频转发的开发时，遇到一个问题，前端订阅播放h264视频流时，有时会出现一段时间黑屏，经过测试发现是没有收到关键帧，只有第一帧是关键帧才能保证后续播放正常。所以后端需要实现一个功能，就…...
arcgis 批量删除Table中的某些Field
当shp或者table文件较少时，可以手动删除每个文件中的某些字段，当文件较多时，就需要使用arcpy或者model进行处理。...
工厂设备扫码使用售卖联网开发需要怎么开发开源代码？
我们将详细介绍如何使用开源代码开发一套用于工厂设备联网统计的系统。我们将详细讨论所需硬件组件的选择、开源框架和库的使用、软件开发流程以及最后的集成和部署。在这个过程中，我们将提供实用的操作步骤和指导，帮助你更容易地完成这个复杂的任务。 …...
软考高级之132个工具和技术
分类 工具与技术 描述 数据收集 头脑风暴 在短时间内获得大量创意，适用于团队环境，需要引导者引导（过程中可以天马行空，不要打断） 包括：头脑风暴、头脑写作 头脑写作：在开始小组创意讨论之…...
算法通过村第十八关-回溯|白银笔记|经典问题
文章目录 前言组合总和问题分割回文串子集问题排序问题字母大小写全排列单词搜索总结 前言 提示：我不愿再给你写信了。因为我终于感到，我们的全部通信知识一个大大的幻影，我们每个人知识再给自己写信。 --安德烈纪德 回溯主要解决一些暴力枚举…...
vue2 集成 - 超图 - SuperMap iClient3D for WebGL 及常用方法
文章目录 1：下载SuperMap iClient3D for WebGL2：格式化项目中所用的依赖包3：vue2 项目引入4：vue2 页面使用常见方法4.1 创建三维场景，引入在线地图资源，定位到指定位置4.2 坐标拾取4.3 用户输入事件4.4 拾取实体4.5 实体改变监听事件4.6 双击全屏4.7 相机移动事件4.8 添加…...
应用程序服务器/事件驱动编程/CommonJS介绍
目录 应用程序服务器事件驱动编程CommonJS 👍 点赞，你的认可是我创作的动力！ ⭐️ 收藏，你的青睐是我努力的方向！ ✏️ 评论，你的意见是我进步的财富！ 应用程序服务器 应用程序服务器是一种用…...
第二十九章 目标检测中的测试模型评价指标(车道线感知)
前言 近期参与到了手写AI的车道线检测的学习中去，以此系列笔记记录学习与思考的全过程。车道线检测系列会持续更新，力求完整精炼，引人启示。所需前期知识，可以结合手写AI进行系统的学习。 介绍 自动驾驶的一大前提是保证人的安全…...
OceanBase 如何通过日志观测冻结转储流程？
本文旨在通过日志解析 OceanBase 的冻结转储流程，以其冻结检查线程为切入点，以租户（1002）的线程名为例。 作者：陈慧明，爱可生测试工程师，主要参与 DMP 和 DBLE 自动化测试项目。 爱可生开源社区…...
React Native 开发环境搭建（全平台详解）
React Native 开发环境搭建（全平台详解） 在开始使用 React Native 开发移动应用之前，正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南，涵盖 macOS 和 Windows 平台的配置步骤，如何在 Android 和 iOS…...
8k长序列建模，蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂
蛋白质结合剂（如抗体、抑制肽）在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上，高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术，但这类方法普遍面临资源消耗巨大、研发周期冗长…...
线程与协程
1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指：像函数调用/返回一样轻量地完成任务切换。 举例说明： 当你在程序中写一个函数调用： funcA() 然后 funcA 执行完后返回&…...
【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现（服务端执行命令请求的过程 - 初始化服务器）
服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...
【第二十一章 SDIO接口(SDIO)】
第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...
【大模型RAG】Docker 一键部署 Milvus 完整攻略
本文概要 Milvus 2.5 Stand-alone 版可通过 Docker 在几分钟内完成安装；只需暴露 19530（gRPC）与 9091（HTTP/WebUI）两个端口，即可让本地电脑通过 PyMilvus 或浏览器访问远程 Linux 服务器上的 Milvus。下面…...
如何将联系人从 iPhone 转移到 Android
从 iPhone 换到 Android 手机时，你可能需要保留重要的数据，例如通讯录。好在，将通讯录从 iPhone 转移到 Android 手机非常简单，你可以从本文中学习 6 种可靠的方法，确保随时保持连接，不错过任何信息。 第 1…...
论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（一）
宇树机器人多姿态起立控制强化学习框架论文解析 论文解读：交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（一） 论文解读：交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化…...
令牌桶 滑动窗口-＞限流 分布式信号量-＞限并发的原理 lua脚本分析介绍
文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结： 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析： 实际业务去理解体会统一注…...
【决胜公务员考试】求职OMG——见面课测验1
2025最新版！！！6.8截至答题，大家注意呀！ 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:（ B ） A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...