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>