一个简单的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> 

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

 

 

分享到:
打赏
未经允许不得转载:

作者: 云鹰, 转载或复制请以 超链接形式 并注明出处 燕杰资源网
原文地址: 《一个简单的PHP图片装逼生成原理》 发布于2020-7-24

评论

切换注册

登录

您也可以使用第三方帐号快捷登录

切换登录

注册

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏