JS 前端文字转图片
发布时间：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>剩下的自己看吧！
7 +1
版权属于: 技术客
原文地址: https://www.sunjs.com/article/detail/c8b0bc21230c4d4e997c6525dfdcbc31.html
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
关键字： jquery 前端 源码 javascript
共 0 条评论