使用html2canvas实现JS截图

1、安装

npm

npm install html2canvas

import html2canvas from 'html2canvas';

更多信息了解官网

2、核心代码

// 生成快照
convertToImage = (container, options = {}) => {
    // 设置放大倍数
    const scale = window.devicePixelRatio;

    // 传入节点原始宽高
    const _width = container.offsetWidth;
    const _height = container.offsetHeight;

    let { width, height } = options as any;
    width = width || _width;
    height = height || _height;

    // html2canvas配置项
    const ops = {
        scale,
        // width,
        // height,
        useCORS: true,
        allowTaint: false,
        ...options,
    };

    return html2canvas(container, ops).then((canvas) => {
        // 返回图片的二进制数据
        return canvas.toDataURL("image/png");
    });
};

3、使用

this.convertToImage(document.getElementById("root")).then((data) => {
   console.log("data", data);
});

4、保存到系统相册

将上面生成的图片base64渲染到img标签，在h5页面用户就可以长按保存到系统相册中

<img src={imagedata} id="base64Img" width="100%"></img>

5、其他参考

html2canvas 使用总结
H5分享截图方案优化