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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/136342.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vr地铁消防虚拟逃生自救系统降低财产及人员伤害

无论是在公共场所还是在家中&#xff0c;火灾都是一种常见的突发事件。这往往会严重影响到人们的财产和生命安全。因此&#xff0c;如何预防火灾和安全逃生就成为了非常重要的话题。这款VR模拟火灾疏散逃生系统&#xff0c;帮助人们了解火灾逃生的技巧以及正确的应对方法。 以传…

记录undefined reference to `SSLv3_client_method‘错误笔记

libcurl.a(libcurl_la-openssl.o): in function ossl_connect_step1: openssl.c:(.text0x3ca8): undefined reference to SSLv3_client_method 我个人环境原因&#xff1a;编译选项指定了某个openssl目录&#xff0c;此目录下有libcrypto.a libssl.a 解决方法&#xff1a;…

【操作系统】考研真题攻克与重点知识点剖析 - 第 2 篇:进程与线程

前言 本文基础知识部分来自于b站&#xff1a;分享笔记的好人儿的思维导图与王道考研课程&#xff0c;感谢大佬的开源精神&#xff0c;习题来自老师划的重点以及考研真题。此前我尝试了完全使用Python或是结合大语言模型对考研真题进行数据清洗与可视化分析&#xff0c;本人技术…

【星海出品】flask 与docker

import os from flask import Flask, request from flask import Response, make_response, jsonify import cv2 import base64 import io import uuid from main import eye ​ app Flask(__name__)​ app.route(/, methods[GET, POST]) # 添加路由blend def upload_file():…

Go语言函数方法

Go语言函数方法 在Go语言中&#xff0c;函数可以关联到自定义类型&#xff0c;从而创建方法。方法是在类型上调用的函数&#xff0c;它们使类型具有方法集。以下是关于Go语言函数方法的一些重要信息&#xff1a; 函数方法的定义&#xff1a; 在Go语言中&#xff0c;方法与函数…

【Agent模型1】MemGPT: Towards LLMs as Operating Systems

论文标题&#xff1a;MemGPT: Towards LLMs as Operating Systems 论文作者&#xff1a;Charles Packer, Vivian Fang, Shishir G. Patil, Kevin Lin, Sarah Wooders, Joseph E. Gonzalez (UC Berkeley) 论文原文&#xff1a;https://arxiv.org/abs/2310.08560 论文出处&#x…

MySQL库的库操作指南

1.创建数据库 一般格式&#xff1a;create database (if not exists) database1_name,database2_name...... 特殊形式&#xff1a; create database charset harset_name collate collate_name 解释&#xff1a; 红色字是用户自己设置的名称charset&#xff1a;指定数据…

Netty入门指南之NIO Buffer详解

作者简介&#xff1a;☕️大家好&#xff0c;我是Aomsir&#xff0c;一个爱折腾的开发者&#xff01; 个人主页&#xff1a;Aomsir_Spring5应用专栏,Netty应用专栏,RPC应用专栏-CSDN博客 当前专栏&#xff1a;Netty应用专栏_Aomsir的博客-CSDN博客 文章目录 参考文献前言ByteBu…

XSS 跨站点脚本漏洞详解

文章目录 漏洞概述XSS漏洞原理xss漏洞危害xss漏洞验证XSS漏洞分类反射型存储型DOM型 固定会话攻击原理简单xss注入复现 XSS 攻防xss构造方法利用标签符号<>事件响应javascript伪协议其他标签 XSS 变形方式xss防御黑白名单策略输入过滤 案例XSS 盲打 漏洞概述 ​ 跨站点脚…

muduo源码剖析之Connector客户端连接类

简介 Connector负责主动发起连接,不负责创建socket,只负责连接的建立,外部调用Connector::start就可以发起连接&#xff0c;Connector具有重连的功能和停止连接的功能&#xff0c;连接成功建立后返回到TcpClient。 主要成员及属性解析 主要接口 setNewConnectionCallback …

Oracle中的索引碎片

索引碎片是指索引在存储空间上不连续的分布情况&#xff0c;它可能会影响到数据库性能和查询效率。索引碎片化主要由以下几个原因导致&#xff1a; 插入、更新和删除操作&#xff1a;当对表中的数据进行插入、更新或删除操作时&#xff0c;索引也需要相应地更新。这些DML操作可…

java压缩pdf体积,图片体积

pdf整体进行压缩,图片进行压缩 // 生成主证书的PDF路径 创建一个文件String pdfPath UploadDown.createFile(".pdf");outputStream new FileOutputStream(pdfPath);bufferedOutputStream new BufferedOutputStream(outputStream);writer PdfWriter.getInstance(…

操作系统 day09(线程)

线程 为什么引入线程 在没引入进程之前&#xff0c;系统中的各个程序只能串行的执行&#xff0c;比如&#xff1a;只能先听歌&#xff0c;再聊QQ。引入进程之后&#xff0c;各个程序可以并发执行&#xff0c;比如&#xff1a;一边听歌&#xff0c;一边聊QQ。但是现在QQ可以一…

springboot(ssm 企业员工薪酬关系系统 Java(codeLW)

springboot(ssm 企业员工薪酬关系系统 Java(code&LW) 开发语言&#xff1a;Java 框架&#xff1a;ssm/springboot vue JDK版本&#xff1a;JDK1.8&#xff08;或11&#xff09; 服务器&#xff1a;tomcat 数据库&#xff1a;mysql 5.7&#xff08;或8.0&#xff09; …

gitlab-ce-12.3.5 挖矿病毒及解决方案

前言 最近发现在使用gitlab提交代码的时候总是失败&#xff0c;一访问gitlab还时常报503&#xff0c;于是使用 top 命令查看了内存占用情况&#xff0c;发现了一个git进程内存使用了2.3g&#xff0c;cpu还一直占用300-400%&#xff0c; 以前不知道gitlab还有病毒&#xff0c;只…

IP 地址冲突检测工具

IP 冲突是一个术语&#xff0c;用于表示同一网络或子网中尝试使用相同 IP 地址的两个或多个设备的状态&#xff0c;这可能会导致发往特定主机的通信与其他主机混淆&#xff0c;因为两者都使用相同的 IP&#xff0c;为了避免这种情况&#xff0c;某些主机在发生 IP 冲突时会失去…

电机应用-直流有刷电机

目录 直流有刷电机 工作原理 直流有刷减速电机的重要参数 电路原理与分析 驱动芯片分析 L298N驱动芯片 直流有刷减速电机控制实现 控制速度原理 硬件设计 L298N 野火直流有刷电机驱动板-MOS管搭建板 软件设计1&#xff1a;两个直流有刷减速电机按键控制 开发设计 …

仓库自动化中的RFID技术的应用浅谈

仓库自动化与RFID技术的结合代表着现代供应链管理的一个重要革新。这两者的协同作用能够显著提升仓储效率、降低成本、增强库存管理、提高货物跟踪的准确性&#xff0c;并且使仓库操作更加智能化。 仓库自动化是一种通过应用自动化技术和系统来管理和优化仓库操作的方法。这种…

用尽可能简单易懂的代码做个时间轴(时间线)

用尽可能简单的代码&#xff0c;做个时间线或者时间轴展示功能&#xff0c;效果如图&#xff1a; 特点&#xff1a;纯DIVCSS构建&#xff0c;需要展示到什么进度&#xff0c;直接加active属性就行了。 还贴心给配了个setProgress(step)函数&#xff0c;功能太简单&#xff0c;…

gpt网站资源分享

gpt网站 gpt网站 下面是一个扫码跳转的图片&#xff1a; 里面有3.5和4模型&#xff0c;目前有免费体验&#xff0c;大家可以试试