文字图片化

示例地址： TextToImage，仅作大家交流使用。

附加_2012年4月18日11:13:00：之前刚分享此代码的时候的版本是不能处理分行的，现在可以了。在做断行的过程，我发现：一个好算法，是胜过无数行苦逼的杂乱代码的...
标签： <无>
代码片段(2)[全屏查看所有代码]

1. [图片] QQ截图20120417233248.jpg

2. [代码][HTML]代码

100
101
102
103
104
105
106
107
<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('
').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('
');
        for ( var j = 0; j < txtArray.length; j++) {
            fillTxt(txtArray[j]);
            context.fillText('
', 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=" 450px; height: 400px;">如果您的长微博字数超过了140个字的限制，在这里输入微博内容，点击右方的“生成图片”，鼠标右击右边“文字”，“图片另存为...”，保存图片后，就可以直接发到微博里了，赶紧试试吧！</textarea></div>
<div style=" 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>