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>
                <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");
    }