新效率

新效率(New Efficiency)

利用HTML5使文字转图片【长微博生成器】

    RT,实现类似现在网上流行的长微博生成器,就是把长文字转成图片。当然功能比不上网上流传的,不知道网上那些用的什么方法。我这是用的HTML5的Canvas特性,也算一种实现吧。 
    示例地址: TextToImage,仅作大家交流使用。  

附加_2012年4月18日11:13:00:之前刚分享此代码的时候的版本是不能处理分行的,现在可以了。在做断行的过程,我发现:一个好算法,是胜过无数行苦逼的杂乱代码的... 

标签: <无>

代码片段(2)

[图片] QQ截图20120417233248.jpg

[代码] [HTML]代码

001 <html>
002 <head>
003 <script type="text/javascript">
004     function $(id) {
005         return document.getElementById(id);
006     }
007     function textToImg() {
008         var len = $('len').value || 30;
009         var i = 0;
010         var fontSize = $('fontSize').value || 15;
011         var fontWeight = $('fontWeight').value || 'normal';
012         var txt = $("txt").value;
013         var canvas = $('canvas');
014         if (txt == '') {
015             alert('请输入文字!');
016             $("txt").focus();
017         }
018         if (len > txt.length) {
019             len = txt.length;
020         }
021         canvas.width = fontSize * len;
022         canvas.height = fontSize * (3 / 2)
023                 * (Math.ceil(txt.length / len) + txt.split('\n').length - 1);
024         var context = canvas.getContext('2d');
025         context.clearRect(0, 0, canvas.width, canvas.height);
026         context.fillStyle = $("showcolor").innerHTML;
027         context.font = fontWeight + ' ' + fontSize + 'px sans-serif';
028         context.textBaseline = 'top';
029         canvas.style.display = 'none';
030         console.log(txt.length);
031         function fillTxt(text) {
032             while (text.length > len) {
033                 var txtLine = text.substring(0, len);
034                 text = text.substring(len);
035                 context.fillText(txtLine, 0, fontSize * (3 / 2) * i++,
036                         canvas.width);
037             }
038             context.fillText(text, 0, fontSize * (3 / 2) * i, canvas.width);
039         }
040         var txtArray = txt.split('\n');
041         for ( var j = 0; j < txtArray.length; j++) {
042             fillTxt(txtArray[j]);
043             context.fillText('\n', 0, fontSize * (3 / 2) * i++, canvas.width);
044         }
045         var imageData context.getImageData(0, 0, canvas.width, canvas.height);
046         var img = $("img");
047         img.src canvas.toDataURL("image/png");
048     }
049     function changeColor() {
050         var c = $("text");
051         var ctx = c.getContext("2d");
052         var red = $("red");
053         var green = $("green");
054         var blue = $("blue");
055         ctx.fillStyle "rgb(" + red.value + "," + green.value + ","
056                 + blue.value + ")";
057         $("showcolor").innerHTML ctx.fillStyle;
058         ctx.fillRect(0, 0, 100, 100);
059         //$('canvas').getContext('2d').fillStyle=$("showcolor").innerHTML;
060     }
061 </script>
062 </head>
063 <body>
064 <div style="float: left"><textarea id="txt"
065     style="width: 450px; height: 400px;">如果您的长微博字数超过了140个字的限制,在这里输入微博内容,点击右方的“生成图片”,鼠标右击右边“文字”,“图片另存为...”,保存图片后,就可以直接发到微博里了,赶紧试试吧!</textarea></div>
066 <div style="width: 200px; height: 100px; float: left; clear: right">
067 <table>
068     <tr>
069         <td><label>字体大小:</label><input size="4" id='fontSize' value='15'/>px</td>
070     </tr>
071     <tr>
072         <td><label>字体精细:</label><select id="fontWeight">
073             <option value="normal">正常</option>
074             <option value="bold">粗</option>
075         </select></td>
076     </tr>
077     <tr>
078         <td><label>每行显示:</label><input size="4" id='len' value="40" />个字</td>
079     </tr>
080     <tr>
081         <td><canvas id="text" width="100" height="100"></canvas>
082         <p>Red: <input type="range" id="red" min="0" max="255" value="0"
083             onchange="changeColor();" /></p>
084         <p>Green:<input type="range" id="green" min="0" max="255"
085             value="0" onchange="changeColor();" /></p>
086         <p>Blue: <input type="range" id="blue" min="0" max="255" value="0"
087             onchange="changeColor();" /></p>
088         目前的颜色:<span id="showcolor"></span></td>
089     </tr>
090  
091     <tr>
092         <td>
093         <button onclick=
094     textToImg();;
095 >生成图片</button>
096         </td>
097     </tr>
098 </table>
099 </div>
100 <canvas id="canvas" style="display:block"></canvas>
101 <div style="margin-left: 650px"><img id="img"
102     style="border: 1px solid" /></div>
103 <script>
104     changeColor();
105 </script>
106 </body>
107 </html>
阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭