文字图片转换成html,利用HTML5使文字转图片

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 

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;

}

style="width: 450px; height: 400px;">如果您的长微博字数超过了140个字的限制，在这里输入微博内容，点击右方的“生成图片”，鼠标右击右边“文字”，“图片另存为...”，保存图片后，就可以直接发到微博里了，赶紧试试吧！

字体大小:px

字体精细: 正常 粗

每行显示:个字

Red：  οnchange="changeColor();" /> Green： value="0" οnchange="changeColor();" /> Blue：  οnchange="changeColor();" /> 目前的颜色:

textToImg();; >生成图片

style="border: 1px solid" />

changeColor();