发布时间:2019-01-15作者:laosun阅读(5803)
所谓的文字转图片就是将字体打入图片中,换种方式来说就是将字体以图片的形式进行展示。
因为js前端 文字 转图片相对来说很简单,这里就不做任何解释了。直接上代码,自己学吧。
<!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>
剩下的自己看吧!
版权属于: 技术客
原文地址: https://www.sunjs.com/article/detail/c8b0bc21230c4d4e997c6525dfdcbc31.html
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
关键字: jquery 前端 源码 javascript