HTML5自定义文字背景生成签名档

朱雀 2020-06-25 09:09 833阅读 0赞

<!doctype html>
    <html>
        <head>  
            <meta charset="utf-8">
            <title>HTML5自定义文字背景生成签名档DEMO</title>
            <style>
                body{
    				background-color: #ddd;-webkit-user-select:none;font-family:hychf,"黑体";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>
        <body>
            <canvas id="mycanvas" width="320" height="256"></canvas>
    		<label for="mytxt1">内容：
    			<input type="text" id="mytxt1" value="HTML5TRICKS" />
    		</label>
    		<label for="dbg">文字背景图：
    			<select id="dbg">
    				<option value="bg4.png">bg4.png</option>
    				<option value="bg5.png">bg5.png</option>
    			</select>
    		</label>
    		<input type="button" id="send" value="生成签名档" />
    		<a href="#" id="imgdownload">下载图片</a>
            
            <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.οnlοad=ShowImg;
                
                function ShowImg(){
                    bg2.src='imgs/'+dbg.value;
                    ctx.drawImage(bg,0,0,mycanvas.width,mycanvas.height);
                    ctx.save();
                    var fpadd=0;//规定内间距
                    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").οnclick=ShowImg;
                imgdownload.οnclick=function(){
                    if(!mytxt1.value){alert('请输入内容');return false;}
                    this.href = mycanvas.toDataURL();
                    this.target = "_blank";
    			    this.download =mytxt1.value + ".png";
                }
                  
            </script>
    
    </div>
    </body>
    </html>