自定義佔位圖作法

時間 2020-01-18
標籤自定義佔位作法简体版
原文原文鏈接
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<style>
			.form{
				width:500px;
			}
			.form>label{
				display: flex;
				margin:30px 0;
			}
			.form>label>input{
				width:50px;
			}
			.form>button{
				width:100px;
				height:35px;
			}
			.context{
				width: 200px !important;
			}
			.down{
				color:#333;
				width:100px;
				text-align: center;
				text-decoration: none;
				font-size:16px;
				display: block;
				border:1px solid #ccc;
				padding:10px;
				margin-top:20px;
			}
		</style>
		<canvas id="canvas"></canvas>
		<a href="javascript:;" class="down">點擊下載</a>
		<div class="form">
			<label>
				<span>尺寸大小：</span>
				<input type="number" class="width" />
				&nbsp; * &nbsp;
				<input type="number" class="height" />
			</label>
			<label>
				<span>文本內容：</span>
				<input type="text" class="context" />
			</label>
			<label>
				<span>字體大小：</span>
				<input type="number" class="font-size" />&nbsp;px
			</label>
			<label>
				<span>字體顏色：</span>
				<input type="text" class="font-color" />
			</label>
			<label>
				<span>背景顏色：</span>
				<input type="text" class="bg-color" />
			</label>
			<label>
				<span>選擇生成的圖片格式：</span>
				<select class="format">
					<option value="JPG">JPG</option>
					<option value="PNG" selected>PNG</option>
					<option value="GIF">GIF</option>
				</select>
			</label>
			<button class="btn">提交</button>
		</div>
		<script>
			function z(ele,index){
				if(index != undefined){
					return document.querySelectorAll(ele)[index]
				}
				return document.querySelector(ele)
			}
			var ctx = z("#canvas").getContext('2d'),
				mPaint,selectVal=z(".format").value;
			z(".btn").onclick = function(){
				
				var width = parseInt(z(".width").value),
					height = parseInt(z(".height").value),
					fontSize = parseInt(z(".font-size").value),
					fontColor = z(".font-color").value,
					bgColor = z(".bg-color").value,
					context = z(".context").value
				ctx.clearRect(0,0,width,height)
				createBitMap(width,height,context,fontSize,bgColor,fontColor)	
				
			}
			z(".format").onchange = function(){
				selectVal = this.value
			}
			function createBitMap(width,height,context,fontSize,bgColor,fontColor){
				z("#canvas").width = width;
				z("#canvas").height = height
				ctx.beginPath()
				ctx.moveTo(width,0);
				ctx.lineTo(width,height)
				ctx.lineTo(0,height)
				ctx.lineTo(0,0)
				ctx.fillStyle = bgColor;
				ctx.fill()
				ctx.font = fontSize+"px 微軟雅黑";
				ctx.fillStyle = fontColor;
				ctx.textAlign = "center"
				ctx.textBaseline = "middle";
				ctx.fillText(context,width/2,height/2);
				ctx.save()
				var url = z("#canvas").toDataURL("p_w_picpath/"+selectVal).replace("p_w_picpath/"+selectVal, "p_w_picpath/octet-stream"); 
				z(".down").href= url
				z(".down").setAttribute("download",(new Date()).getTime() + '.'+selectVal.toLowerCase())
			}
			createBitMap(300,200,"300X200",50,"#ccc","#f1f1f1")
		</script>
	</body>
</html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。