html2canvas 将html转成图片,并传给后端

htmlTransImage('#app', { width: 300},
function(data){
    console.log(data)
},
function(err){
    console.log('上传失败')
})


function htmlTransImage(dom,arg,success,error) {
    html2canvas(document.querySelector('#app'), { width: arg.width || 'auto' }).then(function (canvas) {
        // mockClick(canvas,'#imageBox'); // 将图片存储到本地,且插入到页面上的img标签中展示
        var file = canvas.toDataURL("image/png");
        var formData = new FormData();
        var  blob = dataURLtoFile(file, 'image/jpeg')
        var  fileOfBlob = new File([blob], new Date() + '.jpg')
        formData.append('file', fileOfBlob);
        $.ajax({
            url: "/Manage/UpLoadImage",
            type: "post",
            data: formData,
            contentType: false,
            processData: false,
            success: function (res) {
                success(res)
            },
            error: function (err) {
                error(err)
            }
        });
    })
}

function dataURLtoFile(dataURI, type) {
    var  binary = atob(dataURI.split(',')[1]);
    var  array = [];
    for (var  i = 0; i < binary.length; i++) {
        array.push(binary.charCodeAt(i));
    }
    return new Blob([new Uint8Array(array)], { type: type });
}

function mockClick(canvas,node){
     var imgUrl = canvas.toDataURL('image/jpeg')
    var image = document.createElement('img')
    image.src = imgUrl
    // 将生成的图片放到 类名为 node 的元素中
    document.querySelector(node).appendChild(image)
    var  dom = document.createElement('a')
    dom.href = imgUrl
    // dom .download 后面的内容为自定义图片的名称
    dom .download = 'approval-process'
    dom .click()
}

原文链接：https://blog.csdn.net/sllailcp/article/details/124196383