记录一下html2canvas.js的使用

这里完成的功能是:页面展示html，js截取部分dom并且生成图片，上传到服务器保存

参考文章:https://blog.csdn.net/candy_home/article/details/78424642
官网:https://html2canvas.hertzen.com/
github:https://github.com/niklasvh/html2canvas
从官网或者http://www.bootcdn.cn/下载js文件

网上代码略加修改、参考官网文档后得到

function capture() {
    var html = document.getElementById('contract')
    var b64
    html2canvas(html, {
        backgroundColor: '#FFFFFE',
        allowTaint: true
    }).then(function(canvas) {
        try {
            b64 = canvas.toDataURL("image/png")
            var fd = new FormData();
            fd.append("name", "file");
            var file = fileHandleUtil.dataURLtoFile(b64, 'contract.png')
            fd.append("file", file)
            var xhr = new XMLHttpRequest()
            xhr.addEventListener("load", function(e) {
                var result = JSON.parse(e.target.response)
                if(result.succ) {
                    // 上传成功
                } else {
                    mui.toast(result.msg)
                }
            }, false)
            xhr.open("POST", SERVER_URL + "/upload")
            xhr.send(fd)
        } catch(err) {
            console.log(err)
        }
    }).catch(function onRejected(error) {});
}

其中fileHandleUtil.dataURLtoFile具体实现参考下面代码

function dataURLtoFile (dataurl, filename) {
    var arr = dataurl.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
    });
}

遇到4个坑
1.上传文件时最好还是把base64数据转成file对象，而不是blob对象，否则后端出错，具体转换的代码网上搜搜就有。
2.设置非透明背景色，我这里同时设置了dom节点的背景色、html2canvas方法参数的背景色，都是#FFFFFE，因为不设置的时候在展示图片是看到的是一片黑色。
3.截图不完整，只能截取可见区域，解决方法参考:https://blog.csdn.net/jackqth/article/details/53588897。
4.IPhone中的dataURLtoFile函数返回空白对象{}，真的无力吐槽IOS了，我的解决方法是直接将base64字符串作为参数发送到服务器，然后服务器再做处理。

byte[] bytes = Base64.decodeBase64(b64Str.replaceAll("data:([\\s\\S]+);base64,", "").replaceAll("==", ""));
// 根据bytes生成文件...

记录一下html2canvas.js的使用

记录一下html2canvas.js的使用

猜你喜欢