- <html>
- <head>
- <script type="text/javascript">
- 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>
- </html>
- //该片段来自于http://www.codesnippet.cn/detail/290520133644.html
来源: http://www.codesnippet.cn/detail/290520133644.html