웹사이트가 발전하면서 인증코드는 많은 웹사이트에서 등록이나 로그인에 필요한 보안 수단이 되었습니다. 그러나 때로는 인증 코드의 위치가 우리의 설계 요구 사항을 충족하지 않는 경우가 있으므로 오늘은 PHP에서 인증 코드의 위치를 변경하는 방법에 대해 이야기하겠습니다.
먼저 인증코드 생성 원리를 이해해야 합니다. 일반적으로 확인 코드는 GD 라이브러리를 사용하여 PHP 스크립트에서 생성됩니다. GD 라이브러리는 imagecreate(), imagecolorallocate(), imagestring() 등과 같은 확인 코드 생성을 위한 몇 가지 함수를 제공합니다.
다음으로 이러한 기능에 대해 설명하겠습니다. 다른 인증번호 생성 방식을 사용하시는 경우, 생성원칙에 따라 수정하실 수 있습니다.
imagestring() 함수를 통해 인증코드를 캔버스에 출력할 수 있으며, 이를 통해 인증코드의 위치를 제어할 수 있습니다.
기본 인증 코드 생성 스크립트는 다음과 같습니다.
<?php
session_start();
header("Content-type: image/png");
$code_len = 4;
$width = 80;
$height = 25;
$charset = 'abcdefghkmnprstuvwxyABCDEFGHKMNPRSTUVWXY3456789';
$code = '';
for ($i = 0; $i < $code_len; $i++) {
$code .= $charset[mt_rand(0, strlen($charset) - 1)];
}
$_SESSION['verify_code'] = 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 和 $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元素内，可以通过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(&#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">로그인 후 복사</div></div><p>在上面的代码中，我们先加载原始背景图 <code>bg.jpg
$f_x 및 $f_y 값만 다음과 같이 수정하면 됩니다. <div id="verify"> 요소 안에 확인 코드를 배치하려면 CSS에 다음 코드를 추가하면 됩니다. 🎜rrreee🎜그런 다음 다음을 추가하세요. code in HTML: 🎜rrreee🎜위 코드를 사용하면 생성된 인증 코드를 지정된 요소에 삽입할 수 있으며 그 위치는 CSS에 의해 제어됩니다. 🎜<ol start="3">🎜배경에 인증 코드를 배치하세요🎜🎜🎜경우에 따라 인증 코드를 배경에 배치해야 할 수도 있습니다. 예를 들어 배경이 큰 그림인 경우에는 인증 코드를 배치해야 합니다. 화면 모서리에 있는 인증 코드를 확인하세요. 🎜🎜이 기능을 구현하려면 먼저 인증 코드 없이 배경 이미지를 생성한 다음 배경에 인증 코드를 그려야 합니다. 🎜🎜다음은 기본 구현입니다. 🎜rrreee🎜위 코드에서는 먼저 원본 배경 이미지 <code>bg.jpg를 로드한 다음 새 캔버스에 복사한 다음 인증 코드를 생성하고 삽입합니다. 캔버스에 넣습니다. (이 예시에서 생성된 인증코드는 임의의 위치에 있다는 점에 유의하세요. 목적을 달성하려면 일부 수정이 필요합니다.) 🎜🎜🎜Summary🎜🎜🎜이 글에서는 인증 위치를 변경하는 세 가지 방법을 소개합니다. 코드 중 첫 번째는 PHP에서 생성된 확인 코드를 기반으로 하며 출력 위치를 수정하여 구현됩니다. 두 번째는 확인 코드 캔버스를 HTML 요소에 삽입하고 CSS를 통해 위치를 제어하는 것입니다. 확인을 위해 배경에 확인 코드를 추가하십시오. 코드의 위치는 배경과 일치합니다. 다양한 구현 방법은 다양한 시나리오에 적합하며 실제 요구 사항에 따라 최상의 솔루션을 선택할 수 있습니다. 🎜위 내용은 PHP에서 인증 코드 위치를 변경하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
