How to change the position of verification code in PHP

With the development of websites, verification codes have become a necessary security measure for registration or login on many websites. However, sometimes the location of the verification code does not meet our design requirements, so today we will talk about how to change the location of the verification code in PHP.

First of all, we need to understand the principle of generating verification code. Usually, the verification code is generated in a PHP script using the GD library. The GD library provides some functions for generating verification codes, such as imagecreate(), imagecolorallocate(), imagestring(), etc.

Next, we will explain these functions. If you are using another verification code generation method, you can modify it according to its generation principle.

1. Place the verification code at the specified location

The verification code can be output to the canvas through the imagestring() function, and we can use it to control the location of the verification code.

The following is a basic verification code generation script:

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

With the above code, the verification code will be output to a random position on the canvas. If we want to fix the verification code at a specified location, we only need to modify the values ​​of $f_x and $f_y according to the design requirements.

For example, if we fix the verification code at the center of the canvas, we only need to modify the values ​​of $f_x and $f_y as follows:

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

After running, the verification code will appear in the center of the canvas.

2. Place the verification code within the specified HTML element

If we want to place the verification code within the specified HTML element, we can control the position of the canvas through CSS and place Canvases are embedded into HTML elements.

For example, if we want to place the verification code inside the <div id="verify"> element, we can add the following code in CSS: <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> <p>Then Add the following code in HTML: </p> <pre class="brush:php;toolbar:false">&lt;div&gt;     &lt;img src=&quot;/static/imghwm/default1.png&quot; data-src=&quot;verify.php&quot; class=&quot;lazy&quot; alt=&quot;How to change the position of verification code in PHP&quot; &gt; &lt;/div&gt;</pre> <p>Through the above code, we can embed the generated verification code into the specified element, and its position will be controlled by CSS. </p> <ol start="3"><li>Place the verification code on the background</li></ol> <p>In some cases, we may need to place the verification code on the background. For example, the background is a large picture, we The verification code needs to be placed in the corner of the screen. </p> <p>To implement this function, we can first generate a background image without a verification code, and then draw the verification code onto the background. </p> <p>The following is a basic implementation: </p> <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><p>In the above code, we first load the original background image <code>bg.jpg, and then copy it to the new canvas , then generate the verification code and insert it into the canvas. (Please note that the verification code generated in this example is in a random position. In order to achieve our purpose, some modifications need to be made)

4. Summary

Introduction to this article There are three methods to change the position of the verification code. The first is based on the verification code generated by PHP and is implemented by modifying the output position. The second is to embed the verification code canvas into the HTML element and control the position through CSS. The third is to embed the verification code canvas into the HTML element and control the position through CSS. The first is to add the verification code to the background so that the position of the verification code is consistent with the background. Different implementation methods are suitable for different scenarios, and you can choose the best solution according to your actual needs.