Rotate captcha旋轉(zhuǎn)圖片驗證碼

Rotate captcha 是旋轉(zhuǎn)圖片角度驗證碼項目，包含php生成驗證圖片(gd 或者 imagick)。

因為是基于thinkphp6寫的代碼, 可能依賴的thinkphp6的部分有點多, 稍后會出一個不依賴任何框架的版本

前端JS部分也會逐步移除一些沒有發(fā)出來的依賴

幫到您請幫忙點個star，謝謝啦，有**BUG歡迎issue??

演示圖

演示視頻

Rotate captcha

使用PHP生成驗證圖片(gd 或者 imagick)

安裝

composer require isszz/rotate-captcha -vvv

只支持composer2安裝

PHP部分說明

GD方式在本地開發(fā)環(huán)境PHP8X做了測試可以正常使用Imagick方式只做了基本的測試

JS部分說明

依賴jquery, 暫時使用了一個model插件, 下次更新把這個model改成接口, 可對接自己的model

vue, react版本有能力的朋友參考jquery版自己實現(xiàn)下哦

配置說明

<?php

return [
    'size' => 350,
    'salt' => '%%*$*$#$~#$^[email protected]^&*$#$~',
    'handle' => 'gd',
    'sarea' => 10,
    'gd' => [
        'quality' => 80,
        'compress' => 0, // 0強制轉(zhuǎn)換jpg白底, 壓縮后30KB左右, 1根據(jù)圖片格式壓縮png保持透明
        'bgcolor' => '#fff', // compress = 0 時, 底色, 只支持16進制顏色
    ],
    'imagick' => [
        'quality' => 80,
        'compress' => 0, // 0轉(zhuǎn)jpg白底, 壓縮后30KB左右, 1png保持背景透明, 有損壓縮后90KB左右, 2png保持背景透明, 無損壓縮只能剪掉幾KB
        'bgcolor' => 'white', // compress = 0 時, 底色
    ],
];

thinkphp6中使用

<?php
declare (strict_types = 1);

namespace app\common\controller;

use isszz\captcha\rotate\facade\Captcha as RotateCaptcha;

use think\Response;
use think\Request;

// 這個用自己的哦
use app\common\traits\Showmsg;

class Captcha
{
    use Showmsg;

    /**
     * 生成驗證碼圖片和相關(guān)信息
     */
    public function rotate(Request $request)
    {
        // 用于測試, 這部分, 可以自己整個素材庫, 去數(shù)據(jù)庫, 或者緩存下來總之很靈活
        $list = [
            '1.png',
            '2.png',
            '1.jpg',
            '2.jpg',
            '3.jpg',
            '4.jpg',
            '5.jpg',
            '6.jpg',
            '7.jpg',
            '8.jpg',
            '9.jpg',
            '10.jpg',
            '11.jpg',
            '12.jpg',
            '13.jpg',
        ];

        // upload_path 需要自己寫一個

        // 隨機拿一個圖片
        $key = array_rand($list, 1);
        if(isset($list[$key])) {
            // 從素材存放目錄拿一個圖
            $image = upload_path('captcha_mtl') . $list[$key];  
        }

        // 生成驗證碼需要的圖片
        $data = RotateCaptcha::create(
            $image,
            upload_path('captcha') // 用于存儲生成圖片的目錄
        )->get(260); // 260為最終生成的圖片尺寸

        if(!$data) {
            $this->result(1, 'error');
        }
        // $data['str']是圖片的path加密, 用于前端交換驗證碼圖片
        // 這里前端不涉及拿到角度, 都是去后端驗證
        $this->result(0, 'success', $data['str']);
    }

    /**
     * 通過前端傳遞str字段給后端叫喚圖片顯示到前端
     */
    public function img(Request $request)
    {
        $str = $request->get('id');

        [$format, $image] = RotateCaptcha::img($str, upload_path('captcha'));

        if(empty($image)) {
            return '';
        }

        return response($image, 200, ['Content-Length' => strlen($image)])->contentType('image/'. trim($format, '.'));
    }
    
    /**
     * 驗證
     */
    public function verify(Request $request)
    {
        $angle = $request->get('angle');

        if(empty($angle)) {
            return false;
        }

        if(RotateCaptcha::check($angle)) {
            $this->result(0, 'success');
        }

        $this->result(1, 'error');
    }

}

沒有使用框架時輸出圖片/未經(jīng)測試

$str = $_GET['str'] ?? null;

if(empty($str)) {
    echo '';
}

[$format, $image] = RotateCaptcha::img($str, upload_path('captcha'));

if(empty($image)) {
    echo '';
}

header('Content-Disposition: inline; filename=captcha_' . $str . '.' . $format);
header('Content-type: image/'. $format);
echo $image;

前端使用，暫時代碼邏輯有點問題，因為只是為了做功能測試

// J_open_captcha 需要觸發(fā)打開驗證碼
// 這里設(shè)計邏輯有問題, 當時需要做測試沒細想這個- -...
// 正常這個應(yīng)該是驗證碼的容器dom, 需要把驗證碼渲染到這個dom容器
// 后面再改吧= =...
$('.J_open_captcha').rotateCaptcha({
    api: '/common/captcha', // 獲取驗證碼相關(guān)的api接口, 需要包含(rotate|verify|img)
    // 初始化
    init: function (self) {
        console.log(self);
    },
    // 驗證成功, 例如發(fā)送驗證的后續(xù)操作, 之類的
    success: function() {
        console.log('captcha state：success');
    },
    // 驗證失敗
    fail: function() {
        console.log('captcha state：fail');
    },
    // 觸發(fā)驗證時回調(diào)驗證狀態(tài)state
    complete: function(state) {
        console.log('captcha complete， state：', state);
    },
    // 關(guān)閉驗證碼窗口并返回驗證狀態(tài)state
    close: function(state) {
        console.log('captcha close， state：', state);
    }
});