专栏首页PHP修行之路php实现拼图滑块验证的思考及部分实现

php实现拼图滑块验证的思考及部分实现

实现拼图滑块验证,我觉得其中比较关键的一点就是裁剪图片,最起码需要裁剪出下面两张图的样子

底图

滑块图

一张底图和一张滑块图,其中底图实现起来比较简单可以使用添加水印的方式直接将一张拼图形状的半透明图与一张底图合并起来就可以啦,但是实现滑块图就不能够直接使用某个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);
?>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • php实现命令行里输出带颜色文字

    今天执行composer的时候看到命令窗口出现的提示里面有的关键性部分带有颜色,于是很好奇研究了一下,在这里记录下来

    码缘
  • 【多进程】php实现 master-worker 守护多进程模式

    执行命令 kill 65,杀死进程 65 则master_process 进程会再自动开启一个子进程

    码缘
  • php中连接tcp服务的三种方式

    码缘
  • 最新 Xilinx vivado IP许可申请

    xilinx的fpga使用vivado开发,zynq系列fpga的SOC开发成为主流,加快fpga开发,也进一步提高了fpga开发的灵活性。

    碎碎思
  • Javascipt 上传图片之前修改尺寸和预览

    在做的项目(前端React+后端Django Rest)中,前端Form中有多个File Input,用户可选择上传图片。测试中发现,如果用户选择多个图片且图片...

    fanzhh
  • 推荐两款HTTP Log分析利器

    一款是Apache Logs Viewer,这是一款PC端日志分析软件,从服务器上面把log日志下载回来跑的。

    libo1106
  • 二次验证码是什么,如何使用?

    “二次验证码”是国外谷歌Google二次验证的“微信小程序”的实现,可以让您在微信上很方便的使用二次验证码,保护你的账户安全。

    用户3637271
  • nodejs总结之日志模块log4js

    晓晨
  • 微光小插画—一篇不怎么专业的所谓教程

    说说为什么选择大象和骆驼吧,选择大象是因为是前几天看了一篇呼吁大家不要骑大象的视频,觉得琦大象很残忍,并且这段时间又在读《未来简史》人类史,从另一些角度颠覆了一...

    宇相
  • Web 开发学习笔记(1) --- 搭

    Flask 是一个轻量级的 Web 框架, 如果要学习 Web 开发, Flask 非常适合作为我们学习的起点.

    py3study

扫码关注云+社区

领取腾讯云代金券