canvas生成表单海报

2021-08-31   阅读:1591   分类:前端    标签: canvas

我们有时需要输入表单生成图片,可以使用下面方法生成海报

<div class="dd">
	<img src="images/bg2021.jpg" alt="">
	<input type="text" class="username" id="username">
	<input type="text" class="tel" maxlength="11" id="tel">
	<input type="text" class="num" id="num">
	<input type="text" class="time" id="time">
	<button type="button" class="save" onclick="save()">提交生成</button>
</div>
<div id="app" class="app">
	<div id="appmin" class="appmin">
		
	</div>
</div>

js部分代码

<script>
	function save(){
		let canvas = document.createElement('canvas')
		canvas.width = "1080"
		canvas.height = "1920" //创建画布,并设置宽高
		let ctx = canvas.getContext("2d")

		 //背景图
		var bgImg = './images/bg2021.jpg'; //随机背景图
		var username = $('#username').val();
		var tel = $('#tel').val();
		var num = $('#num').val();
		var time = $('#time').val();

		loadImg([
			bgImg
		]).then(([img1])=> {
				ctx.drawImage(img1, 0, 0, 1080, 1920) //画布上先绘制背景图`
				//文字大小
				ctx.font="52px Microsoft YaHei";
				//字符str
				//位置100,100
				ctx.fillText(username,266,920);
				ctx.fillText(tel,266,1050);
				ctx.fillText(num,326,1170);
				ctx.font="45px Microsoft YaHei";
				ctx.fillText(time,370,1290);

			imageURL = canvas.toDataURL("image/png") //获取图片合并后的data-URL,参数可选图片格式,图片质量,详自查API`
			let img3 = new Image()
			$('#app').fadeIn();
			document.getElementsByClassName("appmin")[0].append(img3)
			img3.src = imageURL
			canvas.style.display = "none"
			$("#appmin").append(" <p>生成成功!长按图片保存</p><img src='images/close.png' class='close' onclick='colse()'/>")
		});

	}
		
		function loadImg(src) {
			let paths = Array.isArray(src) ? src : [src]
			let promise = paths.map((path) => {
				return new Promise((resolve, reject) => {
					let img = new Image()
					img.setAttribute("crossOrigin", 'anonymous')
					img.src = path
					//只是更新了DOM对象,图片数据信息还未加载完成,加载资源是异步执行的,需要监听load事件的,事件发生后,就能获取资源
					img.onload = () => {
						resolve(img)
					}
					img.onerror = (err) => {
						alert('图片加载失败')
					}
				})
			 })
			 return Promise.all(promise)
		}

	function colse(){
		$("#appmin").html('')
		$("#app").fadeOut();
	}
</script>

这里生成1080*1920的海报,图片做背景,其他设置可以根据自己来设置。

【腾讯云】 爆款2核2G3M云服务器首年 61元,2核2G4M云服务器新老同享 99元/年,续费同价

‘简忆博客’微信公众号 扫码关注‘简忆博客’微信公众号,获取最新文章动态
转载:请说明文章出处“来源简忆博客”。http://www.tpxhm.com/fdetail/809.html

×
觉得文章有用就打赏一下文章作者
微信扫一扫打赏 微信扫一扫打赏
支付宝扫一扫打赏 支付宝扫一扫打赏

文章评论(1)

登录
简忆博客壁纸一
简忆博客壁纸二
简忆博客壁纸三
简忆博客壁纸四
简忆博客壁纸五
简忆博客壁纸六
简忆博客壁纸七
简忆博客壁纸八
头像

简忆博客
勤于学习,乐于分享

置顶推荐

打赏本站

如果你觉得本站很棒,可以通过扫码支付打赏哦!
微信扫码:你说多少就多少~
微信扫码
支付宝扫码:你说多少就多少~
支付宝扫码
×