zoukankan      html  css  js  c++  java
  • 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('
    ').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>
    <div>
        <textarea id="txt" style="450px;height:400px;">如果您的长微博字数超过了140个字的限制,在这里输入微博内容,点击右方的“生成图片”,鼠标右击右边“文字”,“图片另存为...”,保存图片后,就可以直接发到微博里了,赶紧试试吧! </textarea> 
    </div>
    <div style="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>
  • 相关阅读:
    Exploits Likely Leveraged by Russia’s APT28 in Highly-Targeted Attack
    WAF绕过的一些总结和思考
    PHP SAFE MODE BYPASS
    RAS算法原理
    如何绕过WAF
    360手机助手关于签名校验的分析
    cat 命令详解
    面向对象简介
    APK签名及简单反编译
    面向对象之基本概念 封装、单多继承
  • 原文地址:https://www.cnblogs.com/zendu/p/4987985.html
Copyright © 2011-2022 走看看