Generate a QQ signature file based on the HTML5 custom text background,

Generate a QQ signature file based on the HTML5 custom text background,

Share a custom text background application using HTML5. First, you can enter the text to be displayed and select a background image for the text, the background image is covered in text like a mask. Click Generate QQ signature file to combine the text background to generate another image. You can also download this image with your QQ signature file.

Download Online Preview source code

Implementation code.

Html code:

<Canvas id = "mycanvas" width = "1280" height = "512"> </canvas> content: <input type = "text" id = "mytxt1" value = "HTML5TRICKS"/> text background image: <select id = "dbg"> <option value = "bg4.png"> bg4.png </option> <option value = "bg5.png"> bg5.png </option> </select> <input type = "button" id = "send" value = ""/> <a href = "#" id = "imgdownload"> download images </a> <script> var mycanvas = document. getElementById ("mycanvas"); var mytxt1 = document. g EtElementById ("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; // specifies the internal spacing var fsz = Math. ceil (mycanvas. width-fpadd * 2)/mytxt1.value. length); // calculate the font size of ctx based on the number of words. font = fsz + "px hychf"; var tw = ctx. measureText (mytxt1.value ). width; // var ftop = (mycanvas. height-fsz)/2-30; // calculate the top var fleft = (mycanvas. width-tw)/2 + 16; // calculate the left ctx text based on the font size. textBaseline = "top"; // sets the text baseline when the text is drawn. Var woodfill = ctx. createPattern (bg2, "repeat"); // set the image as the brush ctx. fillStyle = woodfill; ctx. shadowBlur = 10; // shadow level ctx. shadowOffsetX = 20; ctx. shadowOffsetY = 20; ctx. shadowColor = "rgba (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 ('Enter the content'); return false;} this. href = mycanvas. toDataURL (); this.tar get = "_ blank"; this. download = mytxt1.value + ". png ";}</script>

Css code:

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 ;}

Via: http://www.w2bc.com/Article/25804