html转image--通过html2canvas在浏览器端处理

将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>