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);//设置logovar 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;
}
】线程互斥与线程同步)
方法的应用)
