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

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.

1. 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);

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);  // 控制竖直方向位置

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

2. 将验证码放置在指定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">&lt;div id=&quot;verify&quot;&gt;     &lt;img src=&quot;verify.php&quot; alt=&quot;验证码&quot;&gt; &lt;/div&gt;</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">&lt;?php session_start(); header(&quot;Content-type: image/png&quot;); $width = 300; $height = 200; $img = imagecreate($width, $height); imagecolorallocate($img, 255, 255, 255); //设置背景颜色 // 生成不带验证码的背景图 $bg_img = imagecreatefromjpeg(&amp;#39;bg.jpg&amp;#39;); imagecopy($img, $bg_img, 0, 0, 0, 0, $width, $height); $code_len = 4; $charset = &amp;#39;abcdefghkmnprstuvwxyABCDEFGHKMNPRSTUVWXY3456789&amp;#39;; $code = &amp;#39;&amp;#39;; for ($i = 0; $i &lt; $code_len; $i++) { $code .= $charset[mt_rand(0, strlen($charset) - 1)]; } $_SESSION[&amp;#39;verify_code&amp;#39;] = strtoupper($code); // 将验证码写入背景图中 $font_color = imagecolorallocate($img, mt_rand(0, 100), mt_rand(0, 100), mt_rand(0, 100)); for ($i = 0; $i &lt; $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 :

rrreee
4. Après l'exécution, le code de vérification apparaîtra au centre de la toile.
Placez le code de vérification dans l'élément HTML spécifié
🎜Si nous voulons placer le code de vérification dans l'élément HTML spécifié, nous pouvons contrôler la position du canevas via CSS et intégrer le canevas au milieu de l'élément HTML. 🎜🎜Par exemple, si nous voulons placer le code de vérification à l'intérieur de l'élément <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, puis la copions sur un nouveau canevas, puis générons le code de vérification et insérons dans la toile. (Veuillez noter que le code de vérification généré dans cet exemple est dans une position aléatoire. Afin d'atteindre notre objectif, quelques modifications sont nécessaires) 🎜🎜🎜Résumé🎜🎜🎜Cet article présente trois méthodes pour modifier la position du code de vérification, parmi lesquels le premier est basé sur le code de vérification généré par PHP, qui est implémenté en modifiant la position de sortie ; le deuxième consiste à intégrer le canevas du code de vérification dans l'élément HTML et à contrôler la position via CSS ; code de vérification à l'arrière-plan pour effectuer la vérification La position du code est cohérente avec l'arrière-plan. Différentes méthodes de mise en œuvre conviennent à différents scénarios et vous pouvez choisir la meilleure solution en fonction de vos besoins réels. 🎜

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!