前言网页截图功能也是目前非常普遍的需求，尤其是在在线教育领域。我们朋友圈里的微信海报、活动海报一般都是运营/营销人员通过设计工具设计出来的，但是如何更好的映射到自己的服务体系中，比如H5页面，嵌入更多的信息采集和交互能力。应用探索和页面截图这块是一个很好的解决方案。接下来，笔者将回顾一下如何使用网页。生成页面海报的关键，并将此能力集成到作者的开源项目H5-Dooring中，为小编赋能。在实现文中的具体功能之前，先来看看具体的实现效果：从demo中可以看出，很明显我们的最终目标是生成PC端的H5页面截图，所以下面的问题可能是涉及：如何实现页面转图片如何实现H5效果模拟和截取实际H5页面我们可以先想想实现思路，如何基于dom转为图片呢？这项技术也是一个常见的话题。我们都知道用canvas可以实现。第二步是关键环节，也是最复杂的一步。我们需要手动实现dom到canvas的映射，最后转化为标准的canvas绘图对象。当然，有很多现成的库可以直接帮助我们简化这一步，比如html2canvas、dom-to-image。接下来，我们来解决第一个问题。如何将页面转换成图片？笔者在个人研究和使用html2canvas库的过程中，发现了很多问题，比如样式中是否有%单位，或者是否有一些图片背景问题导致html2canvas不能很好的工作，出现问题带有渲染还原度和清晰度，所以笔者暂时没有深入研究（不过这些问题可以通过自己修改库来解决）。后来笔者直接使用dom-to-image，发现使用起来非常简单，几乎不会出现上述问题，所以笔者果断采用了dom-to-image。看了库的源码，感觉写的也很优雅，通俗易懂。后期做二次开发应该问题不大。我们可以看看它官网的基本用法//介绍importdomtoimagefrom'dom-to-image';//生成图片domtoimage.toPng(node).then(function(dataUrl){varimg=newImage();img.src=dataUrl;document.body.appendChild(img);}).catch(function(error){console.error('oops,somethingwentwrong!',error);});使用也很简单，它提供了足够的配置项，我们可以灵活配置。第一个问题就这样解决了，但是对于使用过程中图片模糊的问题，网上有很多解决方法。比如先放大dom，处理成canvas最后生成图片缩小等，就不一一举例了。如何实现H5效果模拟和截取实际H5页面。因为我们设计的H5页面都是在PC端完成的，所以如果我们要生成H5预览图，无非就是渲染一个本地模拟尺寸。具体方案如下：使用iframe作为H5页面容器生成截图，直接限制宽度在当前页面生成截图。使用服务端爬虫模拟手机访问生成截图。您可以尝试上述所有方案。笔者之前也开源过爬虫应用来解决这个问题。如果你有兴趣，可以研究一下。我们显然会选择第一个解决方案来实现它。就像在演示中，我们看到的弹窗中的H5其实是在iframe中渲染的：有了实现的思路，问题就很容易实现了。我们只需要实现父页面和iframe之间的消息通信，比如iframe加载完成后，手动通知iframe自行拦截。基本实现代码如下://编辑器页面，为父页面//定义截图子页面句柄函数window.getFaceUrl=(url)=>{setFaceUrl(url)setShowModalIframe(false)}//iframe页面，这是预览页面'file',blob,'tpl.jpg');req.post('/files/upload/free',formData).then((res:any)=>{cb&&cb(res.url)})}).catch(function(error:any){console.error('oops,somethingwentwrong!',error);});}//触发父页面的方法，将图片传给父页面generateImg((url:string)=>{parent.window.getFaceUrl(url);})
