关于javascript:浏览器截图方案分析

4次阅读

共计 3459 个字符，预计需要花费 9 分钟才能阅读完成。

页面截屏 是前端常常遇到的需要，比方页面生成海报，弹窗图片分享等。

以下是我整顿三种截图计划：

html2canvas
dom-to-image
webRTC

html2canvas 用的比拟宽泛的前端截图计划，先将 DOM 一个个转为 Canvas 而后导出图片（应用 canvas 自带的 toDataUrl、toBobl）即可。应用起来应该是兼容性比拟好的计划了，能解决大部分的需要，然而也有一写小问题，如：

图片跨域，开启
CSS 属性错乱
遇到 canvas 元素导出后为通明色。

大部分问题还是能够通过配置和百度解决的

const getDomImg = (eleId) => {html2canvas(document.getElementById(eleId), {
        //superMap 整个页面的节点
        backgroundColor: null, // 画进去的图片有红色的边框, 不要可设置背景为通明色（null）allowTaint: true,
        useCORS: true, // 反对图片跨域
        scale: 1, // 设置放大的倍数
    })
        .then((canvas) => {
            // 截图用 img 元素承装，显示在页面的上
            let img = new Image();
            img.src = canvas.toDataURL("image/jpg"); // toDataURL : 图片格式转成 base64
            // 间接下载
            let a = document.createElement("a");
            a.href = canvas.toDataURL("image/jpeg");
            a.download = "test";
            a.click();})
        .catch((err) => {console.log("html2canvas err", err);
        });
};

应用 svg，通过 createObjectURL 或 encodeURIComponent 解决 svg 失去图像资源，能够把 svg 绘制到 canvas。

dom-to-image-more 是 dom-to-image 的升级版将 HTMl 放到 SVG 里，而后创立一个以 SVG 作为源的 Image 元素

然而也有一些问题如：svg 中不容许内部资源（js，css，img 的 url 等），svg 中不反对执行 js，须要通过解决，也不能齐全还原

const getDomImg = (eleId) => {
    domtoimage
        .toPng(document.getElementById(eleId))
        .then(function (dataUrl) {let a = document.createElement("a");
            a.href = dataUrl;
            a.download = "test";
            a.click();})
        .catch(function (error) {console.error("生成失败", error);
        });
};

应用浏览器原生 API——webERT 中的 getDisplayMedia 能够将窗口中的资源以录屏形式从其中拿出一帧，然而须要用户受权和做一些窗口抉择，相比于前两种计划做不到默认截图。

然而劣势也很显著，就是不会有什么款式错乱、图片跨域等问题。因为应用的浏览器原生办法，基本上用户看到是什么样子，截图进去就是什么样子，1: 1 还原。

function getDomImg(videoId: string) {const videoElem: any = document.getElementById(videoId);

    const displayMediaOptions = {
        audio: false,
        video: {width: window.screen.width, height: window.screen.height}, // cursor: "always"
    };

    navigator.mediaDevices
        .getDisplayMedia(displayMediaOptions)
        .then((stream) => {
            videoElem.srcObject = stream;
            setTimeout(() => {var canvas = document.createElement("canvas");
                canvas.width = videoElem.clientWidth;
                canvas.height = videoElem.clientHeight;
                canvas
                    .getContext("2d")
                    .drawImage(
                        videoElem,
                        0,
                        0,
                        window.screen.width,
                        window.screen.height,
                        0,
                        0,
                        canvas.width,
                        canvas.height
                    );
                var dataURL = canvas.toDataURL("image/webp");
                let a = document.createElement("a");
                a.href = dataURL;
                a.download = "test";
                a.click();
                let tracks = videoElem.srcObject.getTracks();
                tracks.forEach((track) => track.stop());
                videoElem.srcObject = null;
            }, 200);
        })
        .finally(() => {});
}

须要在代码中放入一个 Video 标签

<video id="video"></video>

如果有将截图上传的需要，能够转换一个格局在上传。

canvas 导出的 base64 是不能够间接上传到服务器的，所以须要转一下格局，我这边找了转换 Blob 和 file 两种格局的办法。我用的将图片转为 Blob 后上传的。

base64 转化为 Blob 对象

// 
function convertBase64ToBlob(imageEditorBase64) {var base64Arr = imageEditorBase64.split(",");
    var imgtype = "";
    var base64String = "";
    if (base64Arr.length > 1) {
        // 如果是图片 base64，去掉头信息
        base64String = base64Arr[1];
        imgtype = base64Arr[0].substring(base64Arr[0].indexOf(":") + 1,
            base64Arr[0].indexOf(";")
        );
    }
    // 将 base64 解码
    var bytes = atob(base64String);
    //var bytes = base64;
    var bytesCode = new ArrayBuffer(bytes.length);
    // 转换为类型化数组
    var byteArray = new Uint8Array(bytesCode);

    // 将 base64 转换为 ascii 码
    for (var i = 0; i < bytes.length; i++) {byteArray[i] = bytes.charCodeAt(i);
    }

    // 生成 Blob 对象（文件对象）return new Blob([bytesCode], {type: imgtype});
}

base64 转 formData


function base64ToFile(data, fileName) {const dataArr = data.split(",");
    const byteString = atob(dataArr[1]);
    const options: any = {
        type: "image/jpeg",
        endings: "native",
    };
    const u8Arr = new Uint8Array(byteString.length);
    for (let i = 0; i < byteString.length; i++) {u8Arr[i] = byteString.charCodeAt(i);
    }
    let formData = new FormData();
    let fileOfBlob = new File([u8Arr], fileName + ".jpg", options); // 返回文件流
    formData.append("file", fileOfBlob);
    console.log("file", formData);
    debugger;
    return formData;
}

GitHub：https://github.com/AnsonZnl/w…

代码基于 Create React App 演示三种截图办法的根本应用形式。