pbootcms如何指定前端新闻增加以用户昵称和用户名命名的背景水印

手机扫码分享好友

这几天在VIP会员资料的时候发现如果没有一个防伪机制在这里的时候，则会出现部分会员资料外卸的情况；为了相对增加会员用户资源外发后的难以追查；特修改了当前PBOOTCMS版本，实现不同用户登陆的时候，VIP资源正式主体以当前登陆用户的用户昵称和用户名为前提下的背景水印；成功后效果如下：

实施目的：

第一步、通过后台用户管理中心的用户昵称和登录账号，生成以【用户昵称登录账号.png】格式的服务器图片；

第二步、将生成的图片保存至指定目录下；

第三步、将生成的图片作为指定新闻页面正式内容的背景水印；

实施过程：

第一步、修改member.html文件模板；

通过以下这个路径：

PbootCMS-3.Xppsdminiewdefaultmembermember.html

找到member.html，并用本地或者在线工具打开，然后找到约186行左右，涉及以下代码：

	<div class="layui-form-item">
		<div class="layui-input-block">
			<button class="layui-btn" lay-submit>立即提交</button>
			<button type="reset" class="layui-btn layui-btn-primary">重置</button>
		 </div>
	</div>
	 </form>
</div>

然后在其下方添加如下代码：

	  	<div class="layui-tab-item">
		    	<input type="hidden" name="formcheck" value="{$formcheck}" > 
		  		<table class="layui-table">
		  			<thead>
	                    <tr>
	                    	<th>编号</th>
	                        <th>用户名</th>
	                        <th>昵称</th>
	                        <th>注册时间</th>
	                        <th>操作</th>
	                    </tr>
	                </thead>
	                <tbody>
	                    {foreach $members(key,value)}
	                    <tr>
	                    	<td>[value->ucode]</td>
	                        <td>[value->username]</td>
	                        <td>[value->nickname]</td>
	                        <td>[value->register_time]</td>
	                        <td>
<!--增加将用户名和昵称生成图片开始-->
<form method="post" action="/huiyuan-generate_image.php">
    <input type="hidden" name="username" value="[value->username]">
    <input type="hidden" name="nickname" value="[value->nickname]">
    <button type="submit" class="layui-btn" name="submit">生成图片</button>
</form>
<script>
    function generateImage() {
        var text = "据需求设置正确的保存路径"; // 指定的文字内容
        var textColor = "#f3f1f1"; // 文字颜色

        // 创建画布
        var canvas = document.createElement('canvas');
        canvas.width = 200;
        canvas.height = 60;
        var ctx = canvas.getContext('2d');

        // 绘制透明背景
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        // 设置文字样式
        ctx.font = '8px sans-serif';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // 绘制文字
        ctx.fillStyle = textColor;
        ctx.fillText(text, canvas.width / 2, canvas.height / 2);

        // 将画布转换成图片
        var img = new Image();
        img.src = canvas.toDataURL();

        // 显示图片
        var imageContainer = document.getElementById('imageContainer');
        imageContainer.innerHTML = '';
        imageContainer.appendChild(img);
        imageContainer.style.display = 'block';
    }
</script>

<!--增加将用户名和昵称生成图片结束-->
	                        </td>
	                    </tr>
	                    {/foreach}
	                </tbody>
		  		</table>
	    </div>

保存以上代码；注意其中的form表单提交地址，要和huiyuan-generate_image.php实际存在地址一致；

第二步、创建huiyuan-generate_image.php文件

<?php
if (isset($_POST@['submit'])) {
    $username = $_POST@['username'];
    $nickname = $_POST@['nickname'];
    $text = $username . $nickname;
    
    // 创建画布
    $width = 200;
    $height = 60;
    $image = imagecreatetruecolor($width, $height);
    
    // 设置透明背景
    imagesavealpha($image, true);
    $bgColor = imagecolorallocatealpha($image, 0, 0, 0, 127);
    imagefill($image, 0, 0, $bgColor);
    
    // 设置文字颜色
    $textColor = imagecolorallocate($image, 243, 241, 241); // #f3f1f1
    
    // 绘制文字
    $font = $_SERVER['DOCUMENT_ROOT'] . '/images/arial.ttf'; // 字体文件路径，根据需求设置正确的字体文件路径
    $fontSize = 8;
    $textbox = imagettfbbox($fontSize, 0, $font, $text); // 获取文本框大小
    $textWidth = $textbox[2] - $textbox[0];
    $textHeight = $textbox[7] - $textbox[1];
    $x = ($width - $textWidth) / 2;
    $y = ($height - $textHeight) / 2 + $textHeight;
    
    // 绘制文字
    imagettftext($image, $fontSize, 0, $x, $y, $textColor, $font, $text);
    
    // 生成图片并保存
    $imageName = $_POST@['username'] . $_POST@['nickname'] . '.png'; // 图片名称
    $imagePath = $_SERVER['DOCUMENT_ROOT'] . '/images/touxiang/' . $imageName; // 图片保存路径
    imagepng($image, $imagePath);
    
    // 显示生成成功的提示
    echo '<script>window.parent.postMessage("图片生成成功！", "*");</script>';

    // 释放资源
    imagedestroy($image);
}
?>
<script>
function goBack() {
    history.go(-1); // 返回上一页
}

// 监听图片生成成功的提示
window.addEventListener('message', function(event) {
    if (event.data === '图片生成成功！') {
        setTimeout(goBack, 1000); // 2秒后返回上一页
    }
});
</script>

注意事项：

1、'/images/arial.ttf'; // 字体文件路径，根据需求设置正确的字体文件路径，自行随便弄一个字体TTF文件放在根目录IMAGES里面；

2、'/images/touxiang/'      // 图片保存路径，请根据自己实际需求弄到目标文件夹；

第三步、在新闻或产品模板页面添加背景代码：

<div style="width:100%;height:100%;background-image: url(/images/touxiang/huazhongxu秋韵一知秋.png);">……</div>

在需要的目标位置添加这一段代码就可以了，其中"……"部分内容为自由定义。

其中的【huazhongxu秋韵一知秋】可以改为pbootcms的其它参数，比如：

{user:username}{user:nickname}

思路如此，具体怎么用，有需要的各显神通；