Comment changer l'emplacement du code de vérification en PHP-Problème PHP-php.cn

Comment changer l'emplacement du code de vérification en PHP

PHPz

Libérer： 2023-04-04 22:10:02

original

645 Les gens l'ont consulté

Avec le développement des sites Web, les codes de vérification sont devenus une mesure de sécurité nécessaire pour l'inscription ou la connexion sur de nombreux sites Web. Cependant, parfois l'emplacement du code de vérification ne répond pas à nos exigences de conception, nous allons donc parler aujourd'hui de la façon de modifier l'emplacement du code de vérification en PHP.

Tout d'abord, nous devons comprendre le principe de génération du code de vérification. Habituellement, le code de vérification est généré dans un script PHP à l'aide de la bibliothèque GD. La bibliothèque GD fournit certaines fonctions pour générer des codes de vérification, telles que imagecreate(), imagecolorallocate(), imagestring(), etc.

Ensuite, nous expliquerons ces fonctions. Si vous utilisez une autre méthode de génération de code de vérification, vous pouvez le modifier selon son principe de génération.

Placez le code de vérification à l'emplacement spécifié

Le code de vérification peut être affiché sur le canevas via la fonction imagestring(), et nous pouvons l'utiliser pour contrôler l'emplacement du code de vérification.

Voici un script de génération de code de vérification de base :

<?php
session_start();
header("Content-type: image/png");

$code_len = 4;
$width = 80;
$height = 25;

$charset = &#39;abcdefghkmnprstuvwxyABCDEFGHKMNPRSTUVWXY3456789&#39;;
$code = &#39;&#39;;
for ($i = 0; $i < $code_len; $i++) {
    $code .= $charset[mt_rand(0, strlen($charset) - 1)];
}
$_SESSION[&#39;verify_code&#39;] = strtoupper($code);

$img = imagecreate($width, $height);
imagecolorallocate($img, 255, 255, 255);  //设置背景颜色

$font_color = imagecolorallocate($img, mt_rand(0, 100), mt_rand(0, 100), mt_rand(0, 100));
for ($i = 0; $i < $code_len; $i++) {
    $font_size = mt_rand(12, 16);
    $angle = mt_rand(-10, 10);
    $f_x = ($width / $code_len) * $i + mt_rand(0, 5);
    $f_y = $height / 2 + mt_rand(-5, 6);

    imagestring($img, $font_size, $f_x, $f_y, $code[$i], $font_color);  //输出验证码
}

imagepng($img);
imagedestroy($img);

Copier après la connexion

Avec le code ci-dessus, le code de vérification sera affiché à une position aléatoire sur le canevas. Si nous voulons corriger le code de vérification à un emplacement spécifié, il nous suffit de modifier les valeurs de $f_x et $f_y selon les exigences de conception. $f_x 和 $f_y 的值即可。

例如，我们将验证码固定在画布的中心位置，只需要将 $f_x 和 $f_y 的值修改如下：

$f_x = ($width / 2 - (($font_size + 3) * $code_len) / 2) + ($font_size + 3) * $i;  // 控制水平方向位置
$f_y = $height / 2 + mt_rand(-5, 6);  // 控制竖直方向位置

Copier après la connexion

运行后，验证码将出现在画布的中心位置。

将验证码放置在指定HTML元素内

如果我们想将验证码放置在指定HTML元素内，可以通过CSS控制画布的位置，并将画布嵌入到HTML元素中。

例如，我们想将验证码放置在 <div id="verify"> 元素内，可以在CSS中添加如下代码：<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">#verify { position: relative; background-color: #fff; /* 图片背景色 */ width: 100px; height: 32px; text-align: center; } #verify img { position: absolute; /* 设置验证码图片位置 */ top: 0; left: 0; }</pre><div class="contentsignin">Copier après la connexion</div></div><p>然后在HTML中添加如下代码：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><div id="verify"> <img src="verify.php" alt="验证码"> </div></pre><div class="contentsignin">Copier après la connexion</div></div><p>通过上面的代码，我们可以将生成的验证码嵌入到指定元素中，其位置将被CSS控制。</p><ol start="3"><li>将验证码放置在背景上</li></ol><p>在某些情况下，我们可能需要将验证码放置在背景上，例如背景是一张大图，我们需要将验证码放置在画面角落中。</p><p>要实现这个功能，我们可以先生成一个不带验证码的背景图，然后将验证码绘制到背景上。</p><p>下面是一个基本的实现：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><?php session_start(); header("Content-type: image/png"); $width = 300; $height = 200; $img = imagecreate($width, $height); imagecolorallocate($img, 255, 255, 255); //设置背景颜色 // 生成不带验证码的背景图 $bg_img = imagecreatefromjpeg(&#39;bg.jpg&#39;); imagecopy($img, $bg_img, 0, 0, 0, 0, $width, $height); $code_len = 4; $charset = &#39;abcdefghkmnprstuvwxyABCDEFGHKMNPRSTUVWXY3456789&#39;; $code = &#39;&#39;; for ($i = 0; $i < $code_len; $i++) { $code .= $charset[mt_rand(0, strlen($charset) - 1)]; } $_SESSION[&#39;verify_code&#39;] = strtoupper($code); // 将验证码写入背景图中 $font_color = imagecolorallocate($img, mt_rand(0, 100), mt_rand(0, 100), mt_rand(0, 100)); for ($i = 0; $i < $code_len; $i++) { $font_size = mt_rand(12, 16); $angle = mt_rand(-10, 10); $f_x = mt_rand(0, $width - ($font_size + 3)); $f_y = mt_rand(0, $height - $font_size); imagestring($img, $font_size, $f_x, $f_y, $code[$i], $font_color); //输出验证码 } imagepng($img); imagedestroy($img);</pre><div class="contentsignin">Copier après la connexion</div></div><p>在上面的代码中，我们先加载原始背景图 <code>bg.jpg

Par exemple, si nous fixons le code de vérification au centre du canevas, il suffit de modifier les valeurs de $f_x et $f_y comme suit :

Après l'exécution, le code de vérification apparaîtra au centre de la toile.

<div id="verify">, nous pouvons ajouter le code suivant en CSS : 🎜rrreee🎜Ensuite, ajoutez ce qui suit code en HTML : 🎜rrreee🎜Avec le code ci-dessus, nous pouvons intégrer le code de vérification généré dans l'élément spécifié, et sa position sera contrôlée par CSS. 🎜<ol start="3">🎜Placez le code de vérification sur l'arrière-plan🎜🎜🎜Dans certains cas, nous pouvons avoir besoin de placer le code de vérification sur l'arrière-plan, par exemple, l'arrière-plan est une grande image, nous devons placer le code de vérification dans le coin de l’écran. 🎜🎜Pour implémenter cette fonction, nous pouvons d'abord générer une image d'arrière-plan sans code de vérification, puis dessiner le code de vérification sur l'arrière-plan. 🎜🎜Ce qui suit est une implémentation de base : 🎜rrreee🎜Dans le code ci-dessus, nous chargeons d'abord l'image d'arrière-plan originale <code>bg.jpg

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!