QMD/index.html at master · MorFansLab/QMD · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>进击的签名档 - MorFans Lab</title>
		<link href="http://www.bootcss.com/p/layoutit/css/bootstrap-combined.min.css" rel="stylesheet">
        <style>
            body{background-color: #ddd;-webkit-user-select:none;font-family:"微软雅黑","黑体";margin: 0;}
            @font-face{font-family:hychf; src:url('fonts/hychf.ttf');}
            canvas{border: 1px solid #777;display: block;margin: auto;}
            #imgdownload{width: 100px;height: 30px;display: block;text-decoration: none;text-align: center;line-height: 30px;border: 1px solid #000;border-radius: 6px;}
        </style>

    </head>
<div class="container-fluid">
	<div class="row-fluid">
		<div class="span12">
			<div class="navbar">
				<div class="navbar-inner">
					<div class="container-fluid">
						<a class="btn btn-navbar collapsed" data-target=".navbar-responsive-collapse" data-toggle="collapse"></a> <a class="brand" href="#">MorFans Lab</a>
						<div class="nav-collapse navbar-responsive-collapse collapse">
							<ul class="nav">
								<li class="active">
									<a href="http://morfans.cn/app/Lab">实验室</a>
								</li>
								<li>
									<a href="http://morfans.cn">魔帆博客</a>
								</li>
									</ul>
								</li>
							</ul>

						</div>

					</div>
				</div>

			</div>
			<h3 class="text-center text-error">
				进击的签名档生成工具
			</h3>
			<div class="row-fluid">
				<div class="span12">
					<div class="alert">
						 <button type="button" class="close" data-dismiss="alert">×</button>
						<h4>
							提示!
						</h4> <strong>警告!</strong> BUG与你同行.
					</div>
					<div class="hero-unit">
						<h2>
							效果预览
						</h2>
						<p>
						<canvas id="mycanvas" width="1280" height="512" style="font-family:hychf,"></canvas>
						</p>
					</div>
					<h2>
						设定：
					</h2>
					<p>
						内容：<input id="mytxt1" value="MorFans Lab" type="text" />
					</p>
					<p>
						文字背景图：<select id="dbg">
						<option value="bg4.png">背景一</option>
						<option value="bg5.png">背景二</option></select>
					</p>
					<p>
						<a class="btn btn-primary btn-large" href="#" id="send">生成签名档 »</a>
					</p>
					<p>
						<a class="btn" href="#" id="imgdownload">下载图片 »</a>
					</p>
					<script>

            var mycanvas=document.getElementById("mycanvas");
            var mytxt1=document.getElementById("mytxt1");
            var dbg=document.getElementById("dbg");
            var imgdownload=document.getElementById("imgdownload");
            var ctx=mycanvas.getContext("2d");

            var bg=new Image();
            var bg2=new Image();
                bg.src='imgs/bg3.png';
                bg2.src='imgs/bg4.png';

            bg2.onload=ShowImg;

            function ShowImg(){
                bg2.src='imgs/'+dbg.value;
                ctx.drawImage(bg,0,0,mycanvas.width,mycanvas.height);
                ctx.save();
                var fpadd=200;//规定内间距
                var fsz=Math.ceil((mycanvas.width-fpadd*2)/mytxt1.value.length);//根据字数计算字体大小
                ctx.font=fsz+"px hychf";
                var tw=ctx.measureText(mytxt1.value).width;//文字真实宽度
                var ftop=(mycanvas.height-fsz)/2-30;//根据字体大小计算文字top
                var fleft=(mycanvas.width-tw)/2+16;//根据字体大小计算文字left

                ctx.textBaseline="top";//设置绘制文本时的文本基线。
                var woodfill = ctx.createPattern(bg2,"repeat");//设置图片为笔刷
                ctx.fillStyle=woodfill;
                ctx.shadowBlur=10;//阴影程度
                ctx.shadowOffsetX=20;
                ctx.shadowOffsetY=20;
                ctx.shadowColor="rgba(0,0,0,1)";
                ctx.fillText(mytxt1.value,fleft,ftop);
                ctx.lineWidth = 1;
                ctx.strokeStyle ="rgba(255,255,255,0.4)";
                ctx.strokeText(mytxt1.value, fleft, ftop);
                ctx.restore();

            }

            document.getElementById("send").onclick=ShowImg;
            imgdownload.onclick=function(){
                if(!mytxt1.value){alert('请输入内容');return false;}
                this.href = mycanvas.toDataURL();
                this.target = "_blank";
			    this.download =mytxt1.value + ".png";
            }

        </script>
				</div>
			</div>
			<blockquote class="pull-right">
				<p>
					<span class="label" contenteditable="true">&copy;2016 MorFans Lab</span>&nbsp;&nbsp; BY:<a href="http://wpa.qq.com/msgrd?v=3&amp;uin=2685618862&amp;site=qq&amp;menu=yes" target="_blank">SuperPaxxs</a>
				    </p> <small>有爱 <cite>共成长</cite></small>
			</blockquote>
		</div>
	</div>
</div>
</body>
</html>