• 文字图片化


         RT,实现类似现在网上流行的长微博生成器,就是把长文字转成图片。当然功能比不上网上流传的,不知道网上那些用的什么方法。我这是用的HTML5的Canvas特性,也算一种实现吧。 
        示例地址: TextToImage,仅作大家交流使用。  

    附加_2012年4月18日11:13:00:之前刚分享此代码的时候的版本是不能处理分行的,现在可以了。在做断行的过程,我发现:一个好算法,是胜过无数行苦逼的杂乱代码的... 

     
    标签: <无>
     

    代码片段(2)[全屏查看所有代码]

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

    2. [代码][HTML]代码     

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    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>
  • 相关阅读:
    [题解]luogu-P1494 小Z的袜子 普通莫队
    [板子] 线性基
    [板子]字符串-KMP与AC自动机
    [板子]线段树求逆序对
    任务表
    [学习笔记]数列分块入门九题[LOJ6277-6285]
    Python常用高级函数
    Python的闭包和装饰器
    Python的迭代器和生成器
    Python的命名空间
  • 原文地址:https://www.cnblogs.com/520lin/p/5893931.html
Copyright © 2020-2023  润新知