流程：将需要生成图片的部分转换为canvas，再将canvas转换成图片，将图片储存至服务器并引导用户下载
需要使用插件：html2canvas.js、canvas2image.js、base64.js
HTML代码
<!DOCTYPE html> <html> <head lang="zh-CN"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta http-equiv="x-ua-compatible" content="IE=edge, chrome=1"> <meta name="applicable-device" content="pc,mobile"> <title>表格</title> <link href="css/index.css" rel="stylesheet"> <script src="js/jquery-1.12.4.min.js"></script> <!-- html2canvas就是这样一款前端插件,它的原理是将Dom节点在Canvas里边画出来 --> <script src="js/html2canvas.js"></script> <!-- 将canvas图片保存成图片 --> <script src="js/canvas2image.js"></script> <script src="js/base64.js"></script> </head> <style> *{ margin: 0;padding: 0;list-style: none } .tab{ width: 90%;margin: 20px auto; overflow: auto; } .tab li{ width: 45%; float: left;border-left: 1px solid#666; border-bottom: 1px solid#666;height:50px; padding: 0px 0 0 6px; line-height: 50px; } .tab li:nth-child(1),.tab li:nth-child(2){ border-top: 1px solid#666; } .tab li:nth-child(2),.tab li:nth-child(4),.tab li:nth-child(6),.tab li:nth-child(8),.tab li:nth-child(10){ border-right: 1px solid#666; } .tab li input{ width: 70%;padding:10px } #mb{ position: fixed; top: 0;left: 0; width: 100%;height: 100%; background: #000;opacity: 0.5;display:none } .preview{ position: fixed; top: 0;left: 0;right: 0;bottom: 0; width: 90%;height: 400px;margin: auto; background: #fff; padding: 20px;border-radius: 8px; display:none } .preview img{ width: 100%;padding-bottom: 20px; } .preview span{ padding: 10px 30px; background: #000; color: #fff;border-radius: 8px; } .preview span a{ color: #fff; } </style> <body> <ul class="tab" id="content"> <li>问题1</li> <li><input type="text" name="" placeholder="请输入问题1"></li> <li>问题2</li> <li><input type="text" name="" placeholder="请输入问题2"></li> <li>问题3</li> <li><input type="text" name="" placeholder="请输入问题3"></li> <li>姓名</li> <li><input type="text" name="" placeholder="请输入姓名"></li> <li>电话</li> <li><input type="text" name="" placeholder="请输入电话"></li> </ul> <button id="btnSave">提交</button> <div id="images" style="display: none" ></div><br><br> <button id="Download" >生成图片</button> <div id="mb"></div> <div class="preview"> <div id="img"></div> <span id="downoff">关闭</span> <span id="downimg"></span> </div> </body> </html>
JS代码
<script> /*生成canvas图形*/ $("#btnSave").click(function(){ html2canvas(document.querySelector("#content")).then(canvas => { $("#images").append(canvas); }); alert("提交成功") }) /*canvas转化为图片*/ $("#Download").click(function(){ //获取网页中的canvas对象 var mycans=$('canvas')[0]; //调用convertCanvasToImage函数将canvas转化为img形式 var img = convertCanvasToImage(mycans); //将img插入容器 $('#img').append(img); $("#img img").prevAll().remove('img'); $("#mb").fadeIn();$(".preview").fadeIn(); var imgsrc = $('#img img').attr('src'); $.ajax({ type: 'post', data: {img:imgsrc}, url: "你的后端接口路径", success: function (data) { //console.log(data); $("#downimg").html("<a href='../images/"+data+".png' download='下载图片' >保存图片</a>"); }, error: function () { } }) }) function convertCanvasToImage(canvas) { //新Image对象，可以理解为DOM var image = new Image(); // canvas.toDataURL 返回的是一串Base64编码的URL // 指定格式 PNG image.src = canvas.toDataURL("image/png"); return image; } $("#downoff").click(function(){ if(confirm("关闭后可能会造成图片丢失，请问是否关闭。")){ $("#mb").fadeOut(); $(".preview").fadeOut(); } }) </script>
PHP代码
public function index() { header("Content-Type: text/html; charset=utf-8"); $img = input('img'); $img = explode(',',$img); $data = base64_decode($img[1]); $imgname = date('Y').date('m').date('d').time(); $file = fopen("./images/$imgname.png","w"); //创建图片 fwrite($file,$data); //写入内容 fclose($file); return $imgname; }
注意事项：
a.下载图片路径一定要给相对路径
b. Ajax要用post提交，图片转换成base64格式提交用get会报错url太长 414 Request-URI Too Large
c. 储存图片的文件夹要给高权限
插件下载：
http://www.caopeng.vip/plug/js/base64.js
http://www.caopeng.vip/plug/js/html2canvas.js
http://www.caopeng.vip/plug/js/canvas2image.js
http://www.caopeng.vip/plug/js/jquery-1.12.4.min.js