JS 前端文字转图片

发布时间:2019-01-15作者:laosun阅读(5965)

JS

所谓的文字转图片就是将字体打入图片中,换种方式来说就是将字体以图片的形式进行展示。


    因为js前端 文字 转图片相对来说很简单,这里就不做任何解释了。直接上代码,自己学吧。


    WX20190115-150129@2x.png


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <script type="text/javascript">
        function textToImg(name) {
            var fsize = 40;//图片中字体的大小
            //这块判断传过来的参数是否为空
            //判断大概的长度,是否需要截取等等
     var fontSize = 60;
            var fontWeight = "bold";
            var canvas = document.getElementById("head_canvas_default");
            var img1 = document.getElementById("head_canvas_default");
            canvas.width = 120;
            canvas.height = 120;
            var context = canvas.getContext("2d");
            context.fillStyle = getBG();
            context.fillRect(0, 0, canvas.width, canvas.height);
            context.fillStyle = "#FFF";
            context.font = fontWeight + " " + fsize + "px sans-serif";
            context.textAlign = "center";
            context.textBaseline = "middle";
            context.fillText(name, fontSize, fontSize);
            return canvas.toDataURL("image/png")
        }
        function getBG() {
            var bgArray = ["#1abc9c", "#2ecc71", "#3498db", "#9b59b6", "#34495e", "#16a085", "#27ae60", "#2980b9", "#8e44ad", "#2c3e50", "#f1c40f", "#e67e22", "#e74c3c", "#eca0f1", "#95a5a6", "#f39c12", "#d35400", "#c0392b", "#bdc3c7", "#7f8c8d"];
            var color = bgArray[Math.floor(Math.random() * bgArray.length)];
            return color
     }
    </script>
    
    <div>
        <canvas id="head_canvas_default" style="display:none"></canvas>
        <img src="" id="imgid" height='50' width='50' />
        <script>document.getElementById("imgid").src=textToImg('你好');</script>
    </div>
    
    </body>
    </html>


    或者 生成多个

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    </head>
    <body>
    <script type="text/javascript">
        function textToImg(name) {
            var fsize = 20;//图片中字体的大小
            //这块判断传过来的参数是否为空
            //判断大概的长度,是否需要截取等等
     var fontSize = 60;
            var fontWeight = "bold";
            var canvas = document.getElementById("head_canvas_default");
            var img1 = document.getElementById("head_canvas_default");
            canvas.width = 120;
            canvas.height = 120;
            var context = canvas.getContext("2d");
            context.fillStyle = getBG();
            context.fillRect(0, 0, canvas.width, canvas.height);
            context.fillStyle = "#FFF";
            context.font = fontWeight + " " + fsize + "px sans-serif";
            context.textAlign = "center";
            context.textBaseline = "middle";
            context.fillText(name, fontSize, fontSize);
            return canvas.toDataURL("image/png")
        }
        function getBG() {
            var bgArray = ["#1abc9c", "#2ecc71", "#3498db", "#9b59b6", "#34495e", "#16a085", "#27ae60", "#2980b9", "#8e44ad", "#2c3e50", "#f1c40f", "#e67e22", "#e74c3c", "#eca0f1", "#95a5a6", "#f39c12", "#d35400", "#c0392b", "#bdc3c7", "#7f8c8d"];
            var color = bgArray[Math.floor(Math.random() * bgArray.length)];
            return color
     }
    </script>
    
    <div>
        <canvas id="head_canvas_default" style="display:none"></canvas>
        <img src="" class="imgclass" height='100' width='100' />
        <img src="" class="imgclass" height='100' width='100' />
        <img src="" class="imgclass" height='100' width='100' />
        <img src="" class="imgclass" height='100' width='100' />
        <img src="" class="imgclass" height='100' width='100' />
        <img src="" class="imgclass" height='100' width='100' />
        <img src="" class="imgclass" height='100' width='100' />
        <img src="" class="imgclass" height='100' width='100' />
        <img src="" class="imgclass" height='100' width='100' />
        <img src="" class="imgclass" height='100' width='100' />
        <img src="" class="imgclass" height='100' width='100' />
        <img src="" class="imgclass" height='100' width='100' />
        <img src="" class="imgclass" height='100' width='100' />
        <img src="" class="imgclass" height='100' width='100' />
        <img src="" class="imgclass" height='100' width='100' />
        <img src="" class="imgclass" height='100' width='100' />
        <img src="" class="imgclass" height='100' width='100' />
        <img src="" class="imgclass" height='100' width='100' />
        <img src="" class="imgclass" height='100' width='100' />
        <img src="" class="imgclass" height='100' width='100' />
        <img src="" class="imgclass" height='100' width='100' />
        <img src="" class="imgclass" height='100' width='100' />
        <img src="" class="imgclass" height='100' width='100' />
        <img src="" class="imgclass" height='100' width='100' />
        <img src="" class="imgclass" height='100' width='100' />
        <img src="" class="imgclass" height='100' width='100' />
        <img src="" class="imgclass" height='100' width='100' />
        <img src="" class="imgclass" height='100' width='100' />
        <img src="" class="imgclass" height='100' width='100' />
        <img src="" class="imgclass" height='100' width='100' />
        <img src="" class="imgclass" height='100' width='100' />
        <img src="" class="imgclass" height='100' width='100' />
        <img src="" class="imgclass" height='100' width='100' />
        <img src="" class="imgclass" height='100' width='100' />
        <img src="" class="imgclass" height='100' width='100' />
        <img src="" class="imgclass" height='100' width='100' />
        <img src="" class="imgclass" height='100' width='100' />
        <img src="" class="imgclass" height='100' width='100' />
        <img src="" class="imgclass" height='100' width='100' />
        <img src="" class="imgclass" height='100' width='100' />
        <img src="" class="imgclass" height='100' width='100' />
        <img src="" class="imgclass" height='100' width='100' />
        <img src="" class="imgclass" height='100' width='100' />
        <img src="" class="imgclass" height='100' width='100' />
        <img src="" class="imgclass" height='100' width='100' />
        <img src="" class="imgclass" height='100' width='100' />
        <img src="" class="imgclass" height='100' width='100' />
        <img src="" class="imgclass" height='100' width='100' />
        <img src="" class="imgclass" height='100' width='100' />
        <img src="" class="imgclass" height='100' width='100' />
        <img src="" class="imgclass" height='100' width='100' />
        <img src="" class="imgclass" height='100' width='100' />
        <img src="" class="imgclass" height='100' width='100' />
        <img src="" class="imgclass" height='100' width='100' />
        <img src="" class="imgclass" height='100' width='100' />
        <img src="" class="imgclass" height='100' width='100' />
        <img src="" class="imgclass" height='100' width='100' />
        <img src="" class="imgclass" height='100' width='100' />
        <img src="" class="imgclass" height='100' width='100' />
        <img src="" class="imgclass" height='100' width='100' />
        <img src="" class="imgclass" height='100' width='100' />
        <img src="" class="imgclass" height='100' width='100' />
        <img src="" class="imgclass" height='100' width='100' />
        <img src="" class="imgclass" height='100' width='100' />
        <img src="" class="imgclass" height='100' width='100' />
        <img src="" class="imgclass" height='100' width='100' />
        <img src="" class="imgclass" height='100' width='100' />
        <img src="" class="imgclass" height='100' width='100' />
        <img src="" class="imgclass" height='100' width='100' />
        <script type="text/javascript">
            $(document).ready(function(){
                $(".imgclass").each(function(){
                    $(this).attr("src", textToImg('文字转图片'));
                });
            });
        </script>
    </div>
    
    </body>
    </html>


    剩下的自己看吧!

7 +1

版权声明

 jquery  前端  源码  javascript

 请文明留言

0 条评论