html快照抓取,请教前端实现获取dom元素快照的方法

谢谢各位热心的大佬, 昨天我摸索的解决方案是:

逐个把每一个iframe(一个iframe是一个大屏的组件)用html2canvas转成图片, 然后用这个图片替换掉这个组件的Html代码, 这样可以保持这个组件大屏的位置不变. 最后把含有多个组件图片的大屏转成一张图.

具体代码是:snapshot = () => {

const {changeSnapshot} = this.props;

const {components=[]} = this.state;

const names = components.map(i => i.name);

const name = names.shift();

function generateImage(item){

const domId = `#iframe_${item}`;

const dom = document.querySelector(domId).contentWindow.document.querySelector('html')

html2canvas(dom, {allowTaint: true, taintTest: false}).then(canvas=>{

const parent = $(domId).parent();

const width = parent.width();

const height = parent.height();

const image = canvas.toDataURL('image/png');

const imgTag = document.createElement('img');

imgTag.src = image;

imgTag.style.width = `${width}px`;

imgTag.style.height = `${height}px`;

parent.html('').append(imgTag);

const nextName = names.shift();

if(nextName) generateImage(nextName);

else{

const box = document.querySelector('#dashboardContainer');

const canvas1 = document.createElement('canvas');

canvas1.width = `${box.offsetWidth}`;

canvas1.height = `${box.offsetHeight}`;

canvas1.getContext("2d").clearRect(0, 0, box.offsetWidth, box.offsetHeight);

rasterizeHTML.drawHTML(box.innerHTML, canvas1).then( ()=> {

const image1 = canvas1.toDataURL('image/png');

const imgTag1 = document.createElement('img');

imgTag1.src = image1;

box.innerHTML = '';

// box.appendChild(canvas1)

box.appendChild(imgTag1)

changeSnapshot(image1);

}, (e) => {

console.log(e);

});

}

})

}

if(name) generateImage(name);

}