HTML使用canvas绘制海报（网络图片）

最新推荐文章于 2024-01-12 16:09:19 发布

性野喜悲

最新推荐文章于 2024-01-12 16:09:19 发布

阅读量1k

点赞数

文章标签： html 网络前端

本文链接：https://blog.csdn.net/leng0920/article/details/134270587

版权

生成前：

生成后：

<!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: {}, //canvas
					imgHeight: '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, // 持续展示 toast
						forbidClick: 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.width
							imgHeight = imgs.height
							const canvas = that.$refs.canvas
							that.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 = 0
							var base64Img = canvas.toDataURL('image/jpeg');
							that.showImg = true;
							that.saveImg = base64Img;

						};
					},
					afterLoad() {
						vant.Toast.clear();
					},
				},
			})
		</script>

	</body>


</html>