composer require yangshuanlin/php-html2imgtest.php
<?php
require 'vendor/autoload.php';
use Html2image\Assets\html2Img;
/**
* html：可以是html文件 或者网页URL 或者为参数 必填
* $data 额外的参数 必填
* $back_url 回调地址 必填
*/
$html=file_get_contents('./index.html');
$path= $_SERVER['DOCUMENT_ROOT'].'/image/';
$file_name=time();
$data['path']=$path;
$data['file_name']=$file_name;
$back_url='base64_image_save.php';
$html2img=new Html2img($back_url);
$html2img->getImage($html,$data);
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>页面丢失了</title>
</head>
<body>
<div class="error">
<div class="sky">
<h2>
<span>4</span>
<span>0</span>
<span>4</span>
</h2>
<div class="grass"></div>
<img src="lib/image/plane.jpg" class="plane">
</div>
<div class="field">
<h2>啊哦，页面走丢了</h2>
<a href="#">返回首页</a>
</div>
</div>
</body>
<style>
@CHARSET "UTF-8";
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: consolas;
}
.error{
min-height: 100vh;
background: linear-gradient(0deg,#fff,#03a9f4);
}
.sky{
position: relative;
widows: 100%;
height: 60vh;
display: flex;
justify-content: center;
align-items: center;
}
.sky h2{
font-size: 12em;
color: #fff;
text-shadow: 15px 15px 0 rgba(0,0,0,0.1);
}
.sky h2 span{
margin: 0;
padding: 0;
display: inline-block;
animation: animate 2s ease-in-out infinite;
}
.sky h2 span:nth-child(even){
animation-delay: -1s;
}
@keyframes animate{
0%,100%
{
transform: translateY(-50px);
}
50%
{
transform: translateY(50px);
}
}
.field{
padding: 100px;
height: 40vh;
background: #6e2308;
box-shadow: inset 0 20px 10px #51680c;
text-align: center;
}
.field h2{
color: #fff;
font-size: 2em;
font-family: 宋体;
margin-bottom: 20px;
}
.field a{
background: #fff;
color: #000;
width: 160px;
height: 50px;
line-height: 50px;
border-radius: 50px;
display: inline-block;
text-decoration: none;
font-size: 20px;
}
.plane{
position: absolute;
bottom: 200px;
left: 100px;
max-width: 300px;
}
</style>
</html>
<!-- 存放二维码的容器 -->
<div id='qrcode'></div>
<script type='text/javascript' src='http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js'></script>
<script src="https://cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
<script type="text/javascript" >
//解决中午乱码问题
function toUtf8(str) {
var out, i, len, c;
out = "";
len = str.length;
for (i = 0; i < len; i++) {
c = str.charCodeAt(i);
if ((c >= 0x0001) && (c <= 0x007F)) {
out += str.charAt(i);
} else if (c > 0x07FF) {
out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
} else {
out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
}
}
return out;
}
//二维码宽高
var qrcodewidth = 400;
var qrcodeheight = 400;
//canvas宽高
var canvaswidth = qrcodewidth;
var canvasheight = qrcodeheight + 100;
//logo宽高
var logowidth = 100;
var logoheight = 100;
//文字描述位置
var textleft = qrcodewidth / 2;
var texttop = qrcodeheight + 70;
//logo位置
var logoleft = (qrcodewidth - logowidth) / 2;
var logotop = (qrcodeheight - logoheight) / 2;
var qrcode = $('#qrcode').qrcode({
render : 'canvas',
text : toUtf8("https://blog.csdn.net/tswc_byy"),
width : qrcodewidth,
height : qrcodeheight,
background : '#ffffff',
foreground : '#000000',
});
var canvas = qrcode.find('canvas').get(0);
var img = new Image();
img.src = canvas.toDataURL('image/png');
img.onload = function() {
canvas.width = canvaswidth;
canvas.height = canvasheight;
var ctx = canvas.getContext('2d');
//设置画布背景
ctx.fillStyle = '#ffffff';
ctx.fillRect(0, 0, canvas.width, canvas.height);
//设置文字样式
ctx.fillStyle = '#000000';
ctx.font = 'bold ' + 50 + 'px Arial';
ctx.textAlign = 'center';
//文字描述
ctx.fillText("二维码标题", textleft, texttop);
//绘制二维码
ctx.drawImage(img, 0, 0);
//设置logo
var logo = new Image(logowidth, logoheight);
logo.src = 'img/1.gif';
logo.onload = function() {
ctx.drawImage(logo, logoleft, logotop, logowidth, logoheight);
}
}
</script>
base64_image_save.php
<?php
$poatdata=file_get_contents("php://input");
$data=params_parse($poatdata);
$rest=base64_image_content($data['base64data'],$data['path'],$data['file_name']);
echo json_encode($rest);
/**
* @param $base64_image_content [要保存的Base64编码]
* @param $path [图片要保存的路径 绝对路径]
* @param string $file_name [图片文件名，不带后缀]
* @return array
* @throws Exception
*/
function base64_image_content($base64_image_content,$path,$file_name=''){
try {
if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64_image_content, $result)) {
$type = $result[2];
if(!file_exists($path)){
mkdir($path,0777,true);
}
$new_file = $path .$file_name . ".{$type}";
$image_data = str_replace($result[1], '', $base64_image_content);
$rest = file_put_contents($path.'/'.$new_file, base64_decode($image_data));
if ($rest) {
return ['code' => 1, 'msg' => '保存成功', 'img_path' => $new_file];
} else {
return ['code' => 0, 'msg' => '保存失败'];
}
} else {
return ['code' => 0, 'msg' => '参数错误'];
}
}catch (Exception $e){
throw new Exception($e->getMessage());
}
}
/**
* 请求参数解析成数组格式
* @param $data
* @return mixed
*/
function params_parse($data){
$param=explode('&',$data);
foreach ($param as $k=>$v){
$index=substr($v,0,strpos($v,'='));
$temp[$index]=substr($v,strpos($v,'=')+1);;
}
return $temp;
}
