RT, to achieve a long microblog generator similar to the popular online now, is to convert long text into pictures. Of course, the functions are not as good as those circulating on the Internet. I don't know what methods are used on the Internet. I am using the Canvas feature of HTML5, which is also an implementation.
Example address:
TextToImage, only for everyone to communicate.
ADDED_April 18th 2012 11:13:00: The version when I just shared this code was not able to handle branches, now it can. In the process of doing line breaks, I found that a good algorithm is better than the messy code that is forced by countless lines...
1.[Picture] QQ screenshot 20120417233248.jpg
2.[Code][HTML]Code
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('Please enter text!');
$("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;
}
style="width: 450px; height: 400px;">如果您的长微博字数超过了140个字的限制，在这里输入微博内容，点击右方的“生成图片”，鼠标右击右边“文字”，“图片另存为...”，保存图片后，就可以直接发到微博里了，赶紧试试吧！
| 字体大小:px |
| 字体精细: 正常 粗 |
| 每行显示:个字 |
Red： οnchange="changeColor();" /> Green： value="0" οnchange="changeColor();" /> Blue： οnchange="changeColor();" /> 目前的颜色: |
textToImg();; >Generate picture |
style="border: 1px solid" />
changeColor();