图文卡片生成器-夏末浅笑

演示地址：http://tupian.supersc.cn

目录结构

<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>图文卡片生成器</title>
    <link rel="stylesheet" href="css/weui.css"/>
    <link rel="stylesheet" href="css/example.css"/>
</head>
<body ontouchstart>
	<div class="weui-cells__title">内容(一行最多28个字) 长按保存即可</div>
	<div class="weui-cells weui-cells_form">
	    <div class="weui-cell">
	        <div class="weui-cell__bd">
	            <textarea class="weui-textarea" placeholder="请输入内容" id="text" rows="3"></textarea>
	        </div>
	    </div>
	</div>

	<div class="weui-cells__title">署名</div>
  <div class="weui-cells">
      <div class="weui-cell">
          <div class="weui-cell__bd">
              <input class="weui-input" type="text" placeholder="请输入署名 " id="name"/>
          </div>
      </div>
  </div>



	<div class="weui-btn-area">
	  <a class="weui-btn weui-btn_primary" href="javascript:" id="uploaderBotton">确定</a>
	</div>

  <img src=""  id="myImages" style="width: 100%;display: none">


	<script src="js/zepto.min.js"></script>

	<script type="text/javascript">
	    $(function(){
	        var  $uploaderBotton = $("#uploaderBotton");
	        var  $myImages = $("#myImages");

	        $uploaderBotton.on("click", function(){
	        	$("#uploaderBotton").focus();
	        	$myImages.css({
	        		display: 'block',
	        	});
						$myImages.attr('src', "mos.php?text="+encodeURI($("#text").val())+"&name="+encodeURI($("#name").val())+"&tpid="+ parseInt(Math.random()*1246, 10));
		      });
	    });

	</script>
	<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?45d4ca330e5ec4772365c6855c5f7d37";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hm, s);
})();
</script>


</body>
</html>

<?php
define('PHOTO_PATH', 'photo/');
define('FONT_PATH', 'font/msyh.ttc');
define('FONT_SPACED', 25);
define('TEXT_SIZE', 12);
define('NAME_SIZE', 10);

header("content-type:image/jpeg");

$text = $_GET['text']?$_GET['text']:"我爱你！";
$name = $_GET['name']?$_GET['name']:"西城知道";
$tpid = $_GET['tpid']?$_GET['tpid']:"1";

//内容分割处理
$textArray      = explode("\n", $text);                                  //以行拆分内容为数组
$textLine       = count($textArray);                                     //获取内容的行数

//tag图片加载
$tagImagePath   = PHOTO_PATH.$tpid.".jpg";                               //图片路径$tpid为图片名字，请求是可以随机获取。
$tagImage       = imagecreatefromjpeg($tagImagePath);                    //加载创建一个jepg图片对象
$tagImageSize   = getimagesize($tagImagePath);                           //获取jepg图片对象的大小
$tagImageWidth  = $tagImageSize[0];                                      //获取jepg图片对象的宽度数组下标0为宽度下标1为高度
$tagImageHeight = $tagImageSize[1];                                      //获取jepg图片对象的高度数组下标0为宽度下标1为高度

//创建卡片图片
$cardWidth      = 550;                                                   //生成的卡片固定宽度
$cardHeight     = 120+$tagImageHeight+$textLine*FONT_SPACED;             //生成的卡片高度度，根据tagImage的高度，和内容的行数决定
$cardImage      = imagecreatetruecolor($cardWidth,$cardHeight);          //创建卡片图片
imagefill($cardImage,0,0,imagecolorallocate($cardImage,255,255,255)) ;   //填充卡片背景颜色为白色
imagecopy($cardImage,$tagImage,50,50,0,0,$tagImageWidth,$tagImageHeight);//将tag图片合成到卡片图片上去

//把文字写到卡片上
//循环行写
$textColor      = imagecolorallocate($cardImage,47,47,47);  //设置字体颜色
for ($i=0; $i < $textLine; $i++) {
	imagettftext($cardImage, TEXT_SIZE, 0, 50, 100+$tagImageHeight+$i*FONT_SPACED, $textColor, FONT_PATH, $textArray[$i]);
}

//把署名写到卡片上
$textBox = imagettfbbox(NAME_SIZE, 0, FONT_PATH, "--".$name."--");   //获取文字的所占大小,为了居中显示
imagettftext($cardImage, NAME_SIZE, 0, $cardWidth/2-$textBox[2]/2, $cardHeight-15, $textColor, FONT_PATH, "--".$name."--");

imagejpeg($cardImage);    //输出图片
imagedestroy($cardImage); //释放卡片图片资源
imagedestroy($tagImage);  //释放tag图片资源

?>

源码下载链接：http://shudong.supersc.cn/s.php?k=35bd4密码：1a04

图片下载链接：https://share.weiyun.com/5tdbgwX 密码：3s88qc

文章版权归作者所有，未经允许请勿转载。

THE END