一个非常简单的表情生成,省去了配置其他PHP 一个简单的html能能做到
原理非常简单就是利用JS实现
QQ截图20170824093955.png
代码语言:javascript复制<script type="text/javascript">
function draw(){
var canvas = document.getElementById("myCanvas"); //获取Canvas对象(画布)
var write = document.getElementById("text").value //获取文本的值
if(canvas.getContext){ //简单地检测当前浏览器是否支持Canvas对象,以免在一些不支持html5的浏览器中提示语法错误
var ctx = canvas.getContext("2d"); //获取对应的CanvasRenderingContext2D对象(画笔)
var img = new Image(); //创建新的图片对象
img.src = "pic.jpg"; //指定图片的URL
img.onload = function(){ //浏览器加载图片完毕后再绘制图片
ctx.drawImage(img, 0, 0, 300, 282); //以Canvas画布上的坐标(10,10)为起始点,绘制图像 //图像的宽度和高度分别缩放到350px和100px
ctx.font = "25px 微软雅黑"; //设置字体样式
ctx.fillStyle = "black"; //设置字体填充颜色
ctx.textAlign = "center"; //设置文本的水平对对齐方式
ctx.fillText(write, canvas.width/2, 268); //从坐标点(x,y)开始绘制文字
var myImage = canvas.toDataURL("image/png"); //转化为图像数据
var imageElement = document.getElementById("downPic"); //获取一个图像NODE
imageElement.src = myImage;
};
}
}
draw(); //进页面时先绘制一次
</script>
代码添加在网页适合的地方即可