记录学习与后端知识并分享学习代码过程(会飞的鱼Blog)

一个简单的PHP图片装逼生成原理

会飞的鱼 1 2151 2017年8月24日

一个非常简单的表情生成,省去了配置其他PHP 一个简单的html能能做到

原理非常简单就是利用JS实现

QQ截图20170824093955.png

<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> 

代码添加在网页适合的地方即可

本文由 @会飞的鱼 于 2017-8-24 发布在 会飞的鱼Blog,如无特别说明,本博文章均为原创,转载请保留出处。

网友评论当前共有1条评论

会飞的鱼 在线咨询

在线时间:9:00-22:00
周六、周日:14:00-22:00