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

一个非常简单的表情生成,省去了配置其他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> 

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

 

 

CTRL+D快速收藏,欢迎常来喔

本文链接:一个简单的PHP图片装逼生成原理 - https://f162.cn/post-6.html

相关推荐
发表评论
1 评论
  • 7个月前 (06-18)
    哈哈 不错哦