几个截图插件心得这几天有个需求就是预览点击存草稿箱的时候需要把预览出来的数据进行截图,预览的数据是多个的,并且使用ifr

这几天有个需求就是预览点击存草稿箱的时候需要把预览出来的数据进行截图,预览的数据是多个的,并且使用iframe嵌套,用了几个截图插件,所以特此记录

html2canvas不支持iframe格式的,不过相当于下面两个插件还是更好用一些,我做的该项目虽然是iframe,但是我通过获取dom元素,每个iframe都会有个特定的标记,得到iframe的值,然后进行dom操作 ;生成canvas画图

let iframeDom=document.querySelector('body').contentWindow.document.querySelector('..')

html2canvas(iframeDom,{
useCORS:true //支持是否截屏的内容包含图片
}).then(canvas => {
    document.body.appendChild(canvas)
});

rasterizehtml支持iframe,他会生成svg格式的图片,不过他不支持iframe里面会包含img标签的图片路径,路径改变了,如果是svg格式的就不会,并且改标签一定要包含html或者body标签,否则就会截图不了;生成svg格式

rasterizeHTML.drawHTML( document.querySelector('body').html).then(renderResult)=>{

dom-to-image支持iframe和其他标签,它会生成多种图片,但是他不支持所有图片格式的标签,不支持img,svg,而且截屏的图片像素非常低,通过dom节点来获取的,且生成canvas

截图像素比较:html2canvas>rasterizehtml>dom-to-image