php制作医院预约电子就诊卡_预约卡生成器-CSDN博客

本文链接：https://blog.csdn.net/weixin_41765786/article/details/105411650

   之前在医院上班的同事问我能不能帮他做一个他们医院电子预约卡，然后帮他做了一个，在这里记录下来。
  **1、 用户页面 index.html**

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="x5-fullscreen" content="true">
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <title>廊坊世纪协和医院电子就诊卡</title>
	<link rel="stylesheet" href="./static/css/bootstrap.min.css">
	<script language="javascript" src="./static/js/jquery-1.11.1.min.js"></script>
	<script language="javascript" src="./static/js/bootstrap.min.js"></script>
	<style type="text/css">
	.text-center{
		text-align:center;
		letter-spacing:0px;
	}
	.mb{
		height:10px;
	}
	
	</style>
</head>

<body>
<div class="container-fluid">
	<div class="row">
		<div style="padding:10px;">
			<form class="form-horizontal">
				<div class="col-xs-12 col-sm-12 col-md-12 text-center">
					<h3>廊坊世纪协和医院就诊卡</h3>
				</div>
				<div class="col-xs-12 col-sm-12 col-md-12">
					<div class="form-group" style="margin-top:20px;">
						<label for="inputPassword3" class="col-xs-4 col-sm-3 col-md-2 control-label">患者姓名</label>
						<div class="col-xs-8 col-sm-9 col-md-9">
						  <input type="text" class="form-control" id="username" placeholder="请输入患者姓名">
						</div>
					</div>
					<div class="form-group">
						<label for="inputPassword3" class="col-xs-4 col-sm-3 col-md-2 control-label">年龄</label>
						<div class="col-xs-8 col-sm-9 col-md-9">
						  <input type="text" class="form-control" id="age" placeholder="请输入年龄">
						</div>
					</div>
					<div class="form-group">
						<label for="inputPassword3" class="col-xs-4 col-sm-3 col-md-2 control-label">预约科室</label>
						<div class="col-xs-8 col-sm-9 col-md-9">
						  <input type="text" class="form-control" id="keshi" placeholder="请输入预约科室">
						</div>
					</div>
					<div class="form-group">
						<label for="inputPassword3" class="col-xs-4 col-sm-3 col-md-2 control-label">预约号</label>
						<div class="col-xs-8 col-sm-9 col-md-9">
						  <input type="text" class="form-control" id="number" placeholder="请输入预约号">
						</div>
					</div>
				</div>
				<div class="col-xs-12 col-sm-12 col-md-12 text-center">
					<div class="col-xs-2 col-sm-10 col-md-6">
						<button type="button" class="btn btn-info"  id="createImg">生成就诊卡</button>
					</div>
					<div class="col-xs-2 col-sm-2 col-md-6">
						<button type="button" class="btn btn-info" onclick="downLoad();">下载</button>
					</div>
				</div>
				<div class="col-xs-12 col-sm-12 col-md-12 text-center" style="margin-top:20px;">
					<p style="color:red;">*手机用户长按就诊卡图片可保存到相册</p>
				</div>
				<div class="col-xs-12 col-sm-12 col-md-12 text-center" style="margin-top:10px;">
					<div class="col-xs-2 col-sm-3 col-md-4"></div>
					<div class="col-xs-10 col-sm-9 col-md-4">
						<img id="card-img" src="./static/img/moban.png"  style="width:100%;"/ ></div>
					</div>
				</div>
			</form>
		</div>
	</div>
</div>
<script type="text/javascript">
$(function(){
	$('#createImg').click(function(){
		let username = $('#username').val();
		let age = $('#age').val();
		let keshi = $('#keshi').val();
		let number = $('#number').val();
		
		if(username == ''){
			alert('患者姓名未输入');
			return false;
		}else if(age == ''){
			alert('患者年龄未输入');
			return false;
		}else if(keshi == ''){
			alert('就诊科室未输入');
			return false;
		}else if(number == ''){
			alert('预约号码未输入');
			return false;
		}
		$.ajax({
			url:'./createImg.php',
			type:'POST',
			async:'false',
			dataType:'JSON',
			data:{
				username:username,
				age:age,
				keshi:keshi,
				number:number
			},
			success:function(data){
				if(data.result == 1){
					$('#card-img').attr('src',data.imgUrl);
				}
			}
		})
	})
})

function downLoad(){
	let img = document.getElementById('card-img'); 
	let url = img.src;                            
	let a = document.createElement('a');          
	let event = new MouseEvent('click') 
	let username = $('#username').val();
	let down_name = '**医院就诊卡'+new Date().getTime();
	if(username != ''){
		down_name = username + '-就诊卡(**医院)'
	}
	a.download = down_name;                  
	a.href = url;                                 
	a.dispatchEvent(event)                        

}
</script>
</body>
</html>

 **2、php处理文件 createImg.php**

<?php
//清空文件夹

$path = './static/card/';
deldir($path);

//接收数据开始制作就诊卡
$img = "./static/img/moban.png";//模板图片
$data = $_POST;
//将值拆分为数组
$size = 18;//字体大小
$font = realpath("./static/img/simhei.ttf");//加载字体ttf

$img = imagecreatefrompng($img);// 加载已有图像
$black = imagecolorallocate($img, 249, 251, 252);//设置颜色为蓝色
imagettftext($img, $size, 0, 230, 390, $black, $font, trim($data['username']));
imagettftext($img, $size, 0, 540, 390, $black, $font, trim($data['keshi']));
imagettftext($img, $size, 0, 230, 433, $black, $font, trim($data['age']));
imagettftext($img, $size, 0, 540, 433, $black, $font, trim($data['number']));
$time = rand(1,10000).time().".png";//定义图片名
$imgUrl = "./static/card/".$time;
$result = ImagePNG($img,"./static/card/".$time);//保存图片
imagedestroy($img);
$code = array('result'=>0,'msg'=>'');
if($result){
 $code = array('result'=>1,'msg'=>'生成图片成功','imgUrl'=>$imgUrl);
}
echo json_encode($code);
	
function deldir($path){
    
    if(is_dir($path)){
        $p = scandir($path);
        foreach($p as $val){
            if($val !="." && $val !=".."){
                if(is_dir($path.$val)){
                    deldir($path.$val.'/');
                    @rmdir($path.$val.'/');
                }else{
                    unlink($path.$val);
                }
            }
        }
    }
}
	 
?>

在这里插入图片描述