html2canvas实现网页截图

完整代码

要实现网页截图主要借助html2canvas库

安装

yarn add html2canvas

代码如下

/**
 * 将dom节点转化为canvas然后导出图片
 * @param {*} dom dom节点
 * @param {*} isBlob 是否需要转化成blob文件流
 * @param {*} options 传入html2canvas其他配置
 */
export function captureDomToImg(dom, isBlob = true, options = {}) {
    return new Promise((resolve, reject) => {
        if (dom) {
            html2canvas(dom,
                Object.assign({
                    allowTaint: true,
                    backgroundColor: "white",
                    useCORS: true, //支持图片跨域
                    scale: 1, //设置放大的倍数
                }, options)
            ).then(function (canvas) {
                try {
                    const img = canvas.toDataURL("image/png")
                    if (isBlob) {
                        const blob = convertBase64UrlToBlob(img)
                        resolve(blob)
                    } else {
                        resolve(img)
                    }

                } catch (error) {
                    reject("图片保存失败")
                }

            });
        } else {
            reject("dom节点不存在")
        }
    })
}

/**
 * base64图片转Blob，转成blob后可以使用FormData进行文件上传
 * @param {*} urlData base64图片地址
 * @returns 
 */
export function convertBase64UrlToBlob(urlData) {
    //去掉url的头，并转换为byte 
    var split = urlData.split(',');
    var bytes = window.atob(split[1]);
    //处理异常,将ascii码小于0的转换为大于0  
    var ab = new ArrayBuffer(bytes.length);
    var ia = new Uint8Array(ab);
    for (var i = 0; i < bytes.length; i++) {
        ia[i] = bytes.charCodeAt(i);
    }
    return new Blob([ab], { type: split[0] });
}