將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>                <tr>                    <td class="td-bold">S</td>                    <td >100</td>                    <td >110</td>                    <td >120</td>                    <td >130</td>                </tr>                <tr>                    <td class="td-bold">M</td>                    <td >120</td>                    <td >130</td>                    <td >140</td>                    <td >150</td>                </tr>                        </tbody>        </table>        <div style="width:100px;height:10px;">&nbsp;</div><!-- 尺碼表圖片和下面的商品詳情圖片留白用，如果不需要的話，直接截取table的就行了 -->    </div>    <div style="margin-top: 30px;position:fixed;bottom:50px;right:50px"><!--        <a id="btn-convert-html2image" href="#">下載圖片到本地</a> -->        <input type="button" class="btn btn-blue btn-small" value="上傳至服務器" onclick="uploadSizeTabelImage();">    </div></div><div id="division_area" style="display:none;"></div><script type="text/javascript" src="/xxxxx/js/html2canvas.js"></script><script type="text/Javascript">var element = $(".screenshot-div");var getCanvas;jQuery(document).ready(function(){    html2canvas(element, {        onrendered: function (canvas) {               getCanvas = canvas;            }        });});// $("#btn-convert-html2image").on('click', function () {//     var imgageData = getCanvas.toDataURL("image/png");//     var newData = imgageData.replace(/^data:image//png/, "data:application/octet-stream");//     $("#btn-convert-html2image").attr("href", newData)//     $("#btn-convert-html2image").attr("download", "size_table.png");// });function uploadSizeTabelImage(){//  var imgageData = getCanvas.toDataURL("image/jpeg", 1.0);//  var imgageData = getCanvas.toDataURL("image/png");//  var imgageData = getCanvas.toDataURL();//default is image/png    var dataURL = getCanvas.toDataURL("image/png");    var blobBin = atob(dataURL.split(',')[1]);    var array = [];    for(var i = 0; i < blobBin.length; i++) {        array.push(blobBin.charCodeAt(i));    }    var file=new Blob([new Uint8Array(array)], {type: 'image/png'});    var generatedFile = new File([file], "test.png", {type: 'image/png'}); //test.png 對應后臺$_FILES['up']['name'] 用作設定圖片的后綴名    var params = {        'up' : generatedFile    }    jQuery('.size-table-page').mask('Uploading...');    fileUploadXhr({        url: '/PRoduct.php'        , type: 'POST'        , cache: false        , dataType : 'json'        , resetForm : true        , clearForm : true        , includeHidden : false//      , uploadProgress : function(e, position, total, percent) { console.log(total + " : " + percent); }        , success : function(obj, status, xhr) {            jQuery('.size-table-page').unmask();            alert('上傳成功');            window.close();        }        , error : function(xhr, status, error) {            jQuery('.size-table-page').unmask();            alert('上傳失敗.');        }    }, params);}

function fileUploadXhr(options, params) {    var formdata = new FormData();    for(i in params) {        formdata.append(i, params[i]);    }    var s = jQuery.extend(true, {}, jQuery.AjaxSettings, options, {        contentType: false,        processData: false,        cache: false,        type: options.type    });    if (options.uploadProgress) {        // workaround because jqXHR does not expose upload property        s.xhr = function() {            var xhr = jQuery.ajaxSettings.xhr();            if (xhr.upload) {                xhr.upload.addEventListener('progress', function(event) {                    var percent = 0;                    var position = event.loaded || event.position; /*event.position is deprecated*/                    var total = event.total;                    if (event.lengthComputable) {                        percent = Math.ceil(position / total * 100);                    }                    options.uploadProgress(event, position, total, percent);//                    log(total + " : " + percent);                }, false);            }            return xhr;        };    }    s.data = null;    var beforeSend = s.beforeSend;    s.beforeSend = function(xhr, o) {        //Send FormData() provided by user        if (options.formData) {            o.data = options.formData;        }        else {            o.data = formdata;        }        if(beforeSend) {            beforeSend.call(this, xhr, o);        }    };    return jQuery.ajax(s);}

</script>

備注:

這種方式提交的時候，不同的域名間提交數據會發生如下問題:已攔截跨源請求：同源策略禁止讀取位于 xxxxxxxxx的遠程資源。（原因：CORS 頭缺少 'access-Control-Allow-Origin'）。題主所說的跨域問題需要在提供服務的后端解決，前端是無法解決的。需要在后端設置responce的HEAD中Access-Control-Allow-Origin，設置允許跨域的域名。跨域是需要前后端一同協作的。  解決方案,在file服務器上傳文件的開頭添加如下代碼.    if(isset($_SERVER['HTTP_ORIGIN']) && in_array($_SERVER['HTTP_ORIGIN'], array('域名'))) {        header("Access-Control-Allow-Origin: ".$_SERVER['HTTP_ORIGIN']."/r/n");        header("Access-Control-Allow-Methods: POST/r/n");        header("Access-Control-Max-Age: 86400/r/n");    }