实现拼图滑块验证,我觉得其中比较关键的一点就是裁剪图片,最起码需要裁剪出下面两张图的样子
底图
滑块图
一张底图和一张滑块图,其中底图实现起来比较简单可以使用添加水印的方式直接将一张拼图形状的半透明图与一张底图合并起来就可以啦,但是实现滑块图就不能够直接使用某个php提供的函数来直接实现啦,但是这也不是不能完成的事情,大致思路如下:
1.准备好拼图形状的一张滑块模型图,例如
然后创建一个相同大小的透明图片
list($width_z, $height_z, $type_z, $attr_z) = getimagesize(滑块模型地址);
$img = imagecreatetruecolor($width_z, $height_z);
imagesavealpha($img, true);
$bg = imagecolorallocatealpha($img, 255, 0, 0, 127);
imagefill($img, 0, 0, $bg);
2.获取底图的像素矩阵(主要获取图片中每个像素的 颜色索引/rgb 的值)
$background = imagecreatefromjpeg(底图图片地址);
list($width_t, $height_t, $type_t, $attr_t) = getimagesize(底图图片地址);
for ($i=0; $i < $width_t; $i++) {
for ($j=0; $j < $height_t; $j++) {
//获取每个像素的颜色索引值
$color2 = imagecolorat($background, $i, $j);
}
}
3.获取滑块模型图的像素矩阵,并获取矩阵中的黑色区域部分的像素点的坐标
list($width_z, $height_z, $type_z, $attr_z) = getimagesize("滑块模型图地址");
$cover = imagecreatefrompng("滑块模型图地址");
for ($i=0; $i < $width_z; $i++) {
for ($j=0; $j < $height_z; $j++) {
//获取每个像素的颜色索引值
$color2 = imagecolorat($cover, $i, $j);
if($color2 == 0){
//此时的 $i 和 $j 分别表示的是黑色区域的像素点的x,y坐标
}
}
}
4.在底图像素矩阵中按照步骤3中获取的坐标结合底图的实际情况获取像素值
5.将步骤4中获取的像素值,逐个设置到步骤1生成的透明图片上,这样滑块图就做好啦
//设置指定图像的xy坐标的颜色索引 bool imagesetpixel ( resource $image , int $x , int $y , int $color )
整体代码:
<?php
//遮盖层
list($width_z, $height_z, $type_z, $attr_z) = getimagesize("cover.png");
$cover = imagecreatefrompng("cover.png");
//创建一个和遮盖层同样大小的图片
$img = imagecreatetruecolor($width_z, $height_z);
imagesavealpha($img, true);
$bg = imagecolorallocatealpha($img, 255, 0, 0, 127);
imagefill($img, 0, 0, $bg);
//背景层
list($width_t, $height_t, $type_t, $attr_t) = getimagesize("background.jpg");
$background = imagecreatefromjpeg("background.jpg");
$width_max = $width_t-$width_z-10;
$height_max = $height_t-$height_z-10;
$width_ini = rand($width_z+10,$width_max);
$height_ini = rand(10,$height_max);
$width_limit = $width_ini + $width_z;
$height_limit = $height_ini + $height_z;
for ($i=$width_ini; $i < $width_limit; $i++) {
for ($j=$height_ini; $j < $height_limit; $j++) {
$color2 = imagecolorat($background, $i, $j);
//判断索引值区分具体的遮盖区域
if(imagecolorat($cover, $i-$width_ini, $j-$height_ini) == 0){
imagesetpixel($img, $i-$width_ini, $j-$height_ini, $color2);
}
$color1 = imagecolorat($cover, $i-$width_ini, $j-$height_ini);
$s = imagecolorallocatealpha($background, 192, 192, 192, 45);
if($color1 == 0){
imagesetpixel($background,$i,$j,$s);
}
}
}
//生成背景图
imagepng($background);
//生成滑块图
imagepng($img);
?>
以上内容希望帮助到大家,很多PHPer在进阶的时候总会遇到一些问题和瓶颈,业务代码写多了没有方向感,不知道该从那里入手去提升,对此我整理了一些资料,包括但不限于:分布式架构、高可扩展、高性能、高并发、服务器性能调优、TP6,laravel,YII2,Redis,Swoole、Swoft、Kafka、Mysql优化、shell脚本、Docker、微服务、Nginx等多个知识点高级进阶干货需要的可以免费分享给大家,需要
PHP进阶架构师>>>视频、面试文档免费获取shimo.im或 者关注咱们下面的知乎专栏
PHP大神进阶zhuanlan.zhihu.com