php绘图

作为一个00后,很膜拜像Jad大佬,Fuzzz大佬,小航大佬等等人,我接触到的第一个php程序就是小航大佬的“IP签名档”它可以在访问时判断UA,ip,等等,还用接口输出天气和地区(当时我看到就懵了)很不理解这是咋搞的,看到开源了就赶紧下一个钻研钻研,果然大佬就是大佬啊!

在这之前,网上有很多很火的斗图生成网站,孟坤大佬就与众不同,不是次啊用业内的php后端生成,而用canavas绘制,以下是他的代码:

<!--
* 斗图终结者(http://zb.mkblog.cn) 第一版源代码
* 孟坤博客 编写
* 文章地址:https://mkblog.cn/519/
* 编写日期:2016-3-25
* 更新日期:2016-12-25
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>表情包制作</title>
<style>
*{
padding:0;
margin:0;
font-family:"微软雅黑";
font-size: 14px;
}
#text{
width:391px;
height:50px;
text-align:center;
font-size: 18px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
border:1px solid #666;
}
#mainCenter{
max-width:500px;
margin:0 auto;
text-align:center;
}
#myCanvas{
margin:30px 0 0 0;
}
.shadow{
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
/*IE 7 AND 8 DO NOT SUPPORT BORDER RADIUS*/
-moz-box-shadow: 0px 0px 10px #000000;
-webkit-box-shadow: 0px 0px 10px #000000;
box-shadow: 0px 0px 10px #000000;
/*IE 7 AND 8 DO NOT SUPPORT BLUR PROPERTY OF SHADOWS*/
}
</style>
</head>
<body>
<div id="mainCenter">
<canvas id="myCanvas" class="shadow" width="391px" height="368px" style="none;">您的浏览器不支持canvas标签。</canvas>
<br /><br />
<p>在下方输入文字。在图片上使用鼠标右键或长按保存</p>
<input name="text" id="text" onchange ="draw();" onpropertychange ="draw();" oninput ="draw();" value="听说你很跳" />
</div>
<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 = "https://mkblog.cn/blog/demo/doutu/1.png"; //指定原始图片的URL
img.onload = function(){ //浏览器加载图片完毕后再绘制图片
ctx.drawImage(img, 0, 0, 391, 368); //以Canvas画布上的坐标(0,0)为起始点,绘制高度、宽度分别为391和368的图像
ctx.font = "35px 微软雅黑"; //设置字体样式
ctx.fillStyle = "black"; //设置字体填充颜色
ctx.textAlign = 'center'; //设置文本的水平对对齐方式
ctx.fillText(write, canvas.width/2, 350); //从画布高度为350px的地方居中绘制文本
};
}
}
draw();
</script>
</body>
</html>

这直接给我看懵了,canavas的功能确实十分强大啊
但是我又看了看小航的程序,还是他的简单些(大雾,在作品中小航大佬的程序数据是用他自己的接口获取的,背景图则是已经编辑好的,最后只要把数据绘制即可,这则是我用到的代码:
imagettftext($im, 16, 0, 10, 175, $red, $font,'说的话'.$变量1);
于是我删啊删,访问一遍,结果是一个乱码,经过我多次的排查后,发现没声明头,需要添加header("Content-type: image/JPEG");改好后,可以看到index.php输出的图片
imagettftext($im, 16, 0, 10, 175, $red, $font,'说的话'.$变量1);
在这一句代码中 $im 是之前背景图:
$im = imagecreatefromjpeg("xhxh.jpg");
然后就需要在输出前声明画笔,加载字体:
$black = ImageColorAllocate($im, 0,0,0);//定义黑色的值
$red = ImageColorAllocate($im, 255,0,0);//红色
$font = 'msyh.ttf';//加载字体

最后,imagettftext($im, 16, 0, 10, 175, $red, $font,'说的话'.$变量1);这一行代码里,第一个函数是画笔大小,第二个是旋转度数,第三个第四个才是输出坐标,就像是先前写一个from,获取到这里来,给用户输出一个图片,果然大佬的代码就是nb又精简啊!


走自己的路