引入js

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>

html2canvas详细参考官方：http://html2canvas.hertzen.com/

示例

编写html，指定根标签id：table

<table id="table" border="1px" style="height: 100px;width: 100px;background-color: #CCCCCC;" align="center">
    <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
    </tr>
    <tr>
        <td>2</td>
        <td>2</td>
        <td>2</td>
    </tr>
</table>

生成图片base64

$("#bun").click(function() {
    html2canvas(document.querySelector("#table")).then(function(canvas) {
        var imgUri = canvas.toDataURL();
        console.log(imgUri); //图片：base64字符串
        $("body").append('<a href="' + imgUri + '" download="'+Date.parse(new Date())+'">下载图片</a>');
    })
})

备注：测试下载图片，可使用Firefox 和 Chrome浏览器

base64转File对象

function base64URLtoFile(base64Url, filename) {
    var arr = base64Url.split(','),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
    while(n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new File([u8arr], filename, {
        type: mime
    });
}

base64图片上传

function fileupload(base64Url) {    
    var form = document.forms[0];    
    var formData = new FormData();    
    formData.append("file", base64URLtoFile(base64Url, Date.parse(new Date()) + ".png"));       
    $.ajax({
        url: '/file/upload',
        type: 'POST',
        data: formData,
        dataType: 'json',
        async: true,
        cache: false,
        contentType: false,
        processData: false,
        success: function(data) {
            console.log(data);
        },
        error: function(data) {
            alert(data);
        }
    });
}