将html显示截取成图片保存,可以在服务器端实现(这种方式的实现和缺点在另一篇博客中介绍了),同样也可以在浏览器端实现;在浏览器端实现无疑减少的服务器压力。
在浏览器实现需要借助第三方 html2canvas,它的使用方式请参考链接。
http://codepedia.info/convert-html-to-image-in-jquery-div-or-table-to-jpg-png/
核心流程
1,Download and import HTML2Canvas jquery files.
2,Add HTML markup.
3,jQuery Code: Button click convert HTML to Canvas.
4,jQuery Code: Download HTML to IMAGE.
整个实现流程:
screenshot->get image binary->image binary to blob object-> blob object to file object->upload
<style>
.size-table-page { overflow:hidden; max-width:1100px;margin:20px 100px; }
.size-table-page .screenshot-div { display:inline-block; }
.size-table-page table { background-color:#fff; }
.size-table-page table tr td { width:60px; max-width:10%; height:30px; line-height:30px; text-align:center; font-size:13px; padding:3px 6px; border:1px solid #000; }
.size-table-page table tr:first-child td { font-weight:bold; font-size:14px;}
.size-table-page table .td-bold { font-weight:bold; font-size:14px;}
</style>
<div class="size-table-page">
<div class="screenshot-div">
<table>
<tbody>
<tr>
<td class="td-bold">尺寸</td>
<td >肩宽</td>
<td >袖长</td>
<td >下摆</td>
<td >总长</td>
</tr>