HTml js 生成图片

<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>
<div>
<textarea id="txt" style="width:450px;height:400px;">如果您的长微博字数超过了140个字的限制，在这里输入微博内容，点击右方的“生成图片”，鼠标右击右边“文字”，“图片另存为...”，保存图片后，就可以直接发到微博里了，赶紧试试吧！ </textarea>
</div>
<div style="width:200px;height:100px;float:left;clear:right;">
<table>
<tbody>
<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>
</tbody>
</table>
</div>
<canvas id="canvas" style="display:block;"></canvas>
<div>
<img id="img" style="border:1px solid;" />
</div>
<script>
changeColor();
</script>