文字图片化
Posted 有着不该有的帅气
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了文字图片化相关的知识，希望对你有一定的参考价值。
示例地址： TextToImage，仅作大家交流使用。
附加_2012年4月18日11:13:00：之前刚分享此代码的时候的版本是不能处理分行的，现在可以了。在做断行的过程，我发现：一个好算法，是胜过无数行苦逼的杂乱代码的...
附加_2012年4月18日11:13:00：之前刚分享此代码的时候的版本是不能处理分行的，现在可以了。在做断行的过程，我发现：一个好算法，是胜过无数行苦逼的杂乱代码的...
标签： <无>
代码片段(2)[全屏查看所有代码]
2. [代码][HTML]代码
|
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
|
<html><head> function $(id) { return document.getElementById(id); } function textToImg() { var len = $(‘len‘).value || 30; var i = 0; var fontSize = $(‘fontSize‘).value || 15; var fontWeight = $(‘fontWeight‘).value || ‘normal‘; var txt = $("txt").value; var canvas = $(‘canvas‘); if (txt == ‘‘) { alert(‘请输入文字！‘); $("txt").focus(); } if (len > txt.length) { len = txt.length; } canvas.width = fontSize * len; canvas.height = fontSize * (3 / 2) * (Math.ceil(txt.length / len) + txt.split(‘\n‘).length - 1); var context = canvas.getContext(‘2d‘); context.clearRect(0, 0, canvas.width, canvas.height); context.fillStyle = $("showcolor").innerHTML; context.font = fontWeight + ‘ ‘ + fontSize + ‘px sans-serif‘; context.textBaseline = ‘top‘; canvas.style.display = ‘none‘; console.log(txt.length); function fillTxt(text) { while (text.length > len) { var txtLine = text.substring(0, len); text = text.substring(len); context.fillText(txtLine, 0, fontSize * (3 / 2) * i++, canvas.width); } context.fillText(text, 0, fontSize * (3 / 2) * i, canvas.width); } var txtArray = txt.split(‘\n‘); for ( var j = 0; j < txtArray.length; j++) { fillTxt(txtArray[j]); context.fillText(‘\n‘, 0, fontSize * (3 / 2) * i++, canvas.width); } var imageData = context.getImageData(0, 0, canvas.width, canvas.height); var img = $("img"); img.src = canvas.toDataURL("image/png"); } function changeColor() { var c = $("text"); var ctx = c.getContext("2d"); var red = $("red"); var green = $("green"); var blue = $("blue"); ctx.fillStyle = "rgb(" + red.value + "," + green.value + "," + blue.value + ")"; $("showcolor").innerHTML = ctx.fillStyle; ctx.fillRect(0, 0, 100, 100); //$(‘canvas‘).getContext(‘2d‘).fillStyle=$("showcolor").innerHTML; }</script></head><body><div style="float: left"><textarea id="txt" style="width: 450px; height: 400px;">如果您的长微博字数超过了140个字的限制，在这里输入微博内容，点击右方的“生成图片”，鼠标右击右边“文字”，“图片另存为...”，保存图片后，就可以直接发到微博里了，赶紧试试吧！</textarea></div><div style="width: 200px; height: 100px; float: left; clear: right"><table> <tr> <td><label>字体大小:</label><input size="4" id=‘fontSize‘ value=‘15‘ />px</td> </tr> <tr> <td><label>字体精细:</label><select id="fontWeight"> <option value="normal">正常</option> <option value="bold">粗</option> </select></td> </tr> <tr> <td><label>每行显示:</label><input size="4" id=‘len‘ value="40" />个字</td> </tr> <tr> <td><canvas id="text" width="100" height="100"></canvas> <p>Red： <input type="range" id="red" min="0" max="255" value="0" onchange="changeColor();" /></p> <p>Green：<input type="range" id="green" min="0" max="255" value="0" onchange="changeColor();" /></p> <p>Blue： <input type="range" id="blue" min="0" max="255" value="0" onchange="changeColor();" /></p> 目前的颜色:<span id="showcolor"></span></td> </tr> <tr> <td> <button onclick= textToImg();;>生成图片</button> </td> </tr></table></div><canvas id="canvas" style="display:block"></canvas><div style="margin-left: 650px"><img id="img" style="border: 1px solid" /></div><script> changeColor();</script></body> |
以上是关于文字图片化的主要内容，如果未能解决你的问题，请参考以下文章