html代码：
```
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>海报模板</title>
<style>
body,
ul,
ol,
li,
p,
h1,
h2,
h3,
h4,
h5,
h6,
form,
fieldset,
table,
td,
img,
div {
margin: 0;
padding: 0;
border: 0;
}
body {
background: #fff;
color: #333;
font-size: 12px;
font-family: '微软雅黑';
}
ul,
ol {
list-style-type: none;
}
select,
input,
img,
select {
vertical-align: middle;
}
a {
text-decoration: none;
}
a:link {
color: #009;
}
a:visited {
color: #800080;
}
a:hover,
a:active,
a:focus {
color: #c00;
text-decoration: underline;
}
.poster-box {
width: 350px;
padding-bottom: 10px;
overflow: hidden;
-webkit-transform-origin: left top;
-webkit-transform: scale(2.5);
}
.poster-box .head-title {
padding: 5px;
overflow: hidden;
}
.poster-box .head-title .logo {
width: 50px;
height: 50px;
float: left;
border-radius: 5px;
overflow: hidden;
}
.poster-box .head-title .logo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.poster-box .head-title .title {
width: 285px;
height: 50px;
float: left;
padding-left: 5px;
line-height: 25px;
}
.poster-box .head-title .title .title-bold {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
font-size: 17px;
font-weight: bold;
color: #0d0d0d;
}
.poster-box .head-title .title .title-normal {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
font-size: 15px;
color: #666666;
}
.poster-box .product-picture {
width: 100%;
height: 350px;
line-height: 350px;
margin-top: 5px;
text-align: center;
}
.poster-box .product-picture img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}
.poster-box .product-price {
padding: 10px 10px 5px;
overflow: hidden;
}
.poster-box .product-price .selling-price {
margin-right: 10px;
font-size: 22px;
font-weight: bold;
color: #ff6204;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.poster-box .product-price .original-price {
color: #9e9e9e;
font-weight: bold;
font-size: 16px;
line-height: 30px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.poster-box .product-price .original-price span {
text-decoration: line-through;
}
.poster-box .introduce-title {
padding: 0 10px 10px;
height: 48px;
}
.poster-box .introduce-title span {
font-size: 18px;
font-weight: 600;
color: #0e0e0e;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.poster-box .tail-information {
margin-top: 5px;
padding: 0 10px;
}
.poster-box .tail-information .personal {
width: 210px;
float: left;
margin-top: 20px;
}
.poster-box .tail-information .personal .head-portrait {
width: 50px;
height: 50px;
float: left;
}
.poster-box .tail-information .personal .head-portrait img {
width: 100%;
height: 100%;
border-radius: 50%;
}
.poster-box .tail-information .personal .personal-name {
float: left;
margin-left: 10px;
margin-top: 5px;
}
.poster-box .tail-information .personal .personal-name .name {
width: 150px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
font-size: 16px;
margin-bottom: 3px;
}
.poster-box .tail-information .personal .personal-name .static-state {
font-size: 12px;
color: #848484;
}
.poster-box .tail-information .qrcode-box {
width: 72px;
float: right;
}
.poster-box .tail-information .qrcode-box img {
width: 100%;
}
</style>
</head>
<body>
<div class="poster-box">
<div class="head-title">
<div class="logo">
<img src="{$data.merchant_logo}" alt="" />
</div>
<if condition="$data.share_title neq ''">
<div class="title">
<div class="title-bold">{$data.store_name}</div>
<div class="title-normal">
{$data.share_title}
</div>
</div>
<else />
<div class="title" style="line-height:50px;">
<div class="title-bold">{$data.store_name}</div>
</div>
</if>
</div>
<div class="product-picture">
<img src="{$data.images}" alt="" />
</div>
<div class="product-price">
<div class="selling-price"><span>{$data.sell_price}</span></div>
<if condition="$data.original_price neq '￥0.00'">
<div class="original-price"><span>{$data.original_price}</span></div>
</if>
</div>
<div class="introduce-title">
<span
>{$data.goods_name}</span
>
</div>
<div class="tail-information">
<div class="personal">
<div class="head-portrait">
<img src="{$data.head_img_url}" alt="">
</div>
<div class="personal-name">
<p class="name">{$data.nickname}</p>
<p class="static-state">给您推荐一件好东西</p>
</div>
</div>
<div class="qrcode-box">
<div class="qrcode-img">
<img src="{$data.qrcode}" alt="" />
</div>
<div class="qrcode-text">
<span>长按识别购买</span>
</div>
</div>
</div>
</div>
</body>
</html>
~~~
```
php代码：
```
~~~
/**
* 截取海报图片
* @param $goods_info
* @return string
*/
public function createPosterImage($goods_info)
{
$goods_id = $goods_info['id'];
$url = C('WANHE_SHOP_DOMAIN') . '/api.php/goods_poster?store_name=' . urlencode($goods_info['store_name']) . '&share_title='. urlencode($goods_info['attribute']);
//创建放图片的文件夹
$path = './Uploads';
mkdirss($path . '/poster/goods_html');
mkdirss($path . '/poster/goods_qrcode');
$html_file_prefix = $goods_info['user_id'] ? $goods_info['user_id'] : 0;
$stream_opts = [
"ssl" => [
"verify_peer"=>false,
"verify_peer_name"=>false,
]
];
$html_content = file_get_contents($url,false,stream_context_create($stream_opts));
$new_html_url = $path . '/poster/goods_html/gid_' . $goods_id . '_uid_'. $html_file_prefix . '_online.html';
file_put_contents($new_html_url, $html_content);
$img_path = '/poster/goods_qrcode/' . md5($goods_info['id'] . time()) . '.jpg';
$file = $path . $img_path;
shell_exec("/usr/local/bin/wkhtmltoimage --crop-w 875 --crop-h 1625 --width 875 --height 1625 --quality 100 {$new_html_url} {$file}");
return $img_path;
}
/**
* 海报页面数据
* @param $request
* @return array
*/
public function posterHtml($request)
{
foreach ($request as &$item) {
$item = urldecode($item);
}
$*****= $request['*****'];
$data = [
'***' => $*****,
];
return $data;
}
~~~
```
