如何在PHP中改變驗證碼的位置-PHP問題-PHP中文網

首頁

後端開發

PHP問題

如何在PHP中改變驗證碼的位置

PHPz

Apr 04, 2023 pm 05:28 PM

隨著網站的發展，驗證碼已成為了許多網站註冊或登入必備的安全措施。然而，有時驗證碼的位置並不符合我們的設計要求，那麼今天我們就來講如何在PHP中改變驗證碼的位置。

首先，我們需要了解驗證碼的生成原理。通常情況下，驗證碼是在使用GD庫的PHP腳本中產生的，GD庫提供了一些用於產生驗證碼的函數，例如 imagecreate()、imagecolorallocate()、imagestring() 等。

接下來，我們將圍繞這些函數展開講解。如果您使用的是其他驗證碼產生方式，可以根據其產生原理進行修改。

將驗證碼放置在指定位置

透過imagestring()函數可以將驗證碼輸出到畫布上，我們可以使用它來控制驗證碼的位置。

下面是一個基本的驗證碼產生腳本：

<?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);

登入後複製

透過上面的程式碼，驗證碼將會輸出到畫布的隨機位置上。如果我們想要將驗證碼固定在指定位置，只需要依照設計要求修改 $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);  // 控制竖直方向位置

登入後複製

運行後，驗證碼將出現在畫布的中心位置。

將驗證碼放置在指定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">登入後複製</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">登入後複製</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('bg.jpg'); imagecopy($img, $bg_img, 0, 0, 0, 0, $width, $height); $code_len = 4; $charset = 'abcdefghkmnprstuvwxyABCDEFGHKMNPRSTUVWXY3456789'; $code = ''; for ($i = 0; $i < $code_len; $i++) { $code .= $charset[mt_rand(0, strlen($charset) - 1)]; } $_SESSION['verify_code'] = 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">登入後複製</div></div><p>在上面的程式碼中，我們先載入原始背景圖<code>bg.jpg，然後將其複製到新的畫布中，接著產生驗證碼並將其插入到畫布中。（請注意，這個範例中產生的驗證碼是隨機位置的，為了達到我們的目的，還需要再做一些修改）