前端生成海报图怎么做？

前端生成海报图怎么做？这是一道非常高频的前端面试题，但是很多同学在面试时候都回答不出来，老规矩，点赞收藏，点点关注支持一下，给我一分钟，理想哥教大家该怎么满分回答这个问题。

如果我是求职者，我会这么回答：

前端生成海报图，可以用以下几种方案：

第一：html2canvas 开源库

这种方案是通过读取页面DOM元素的信息，然后把dom重新绘制成canvas实现网页截图

优点是支持多种排版样式，有提供跨域问题解决方案，还可以对指定DOM过滤，兼容性更好。缺点是库的体积比较大，计算耗时长，性能比较一般，而且一些属性不支持转化：如不支持伪类，border不支持dash，不支持text-shadow

第二：dom-to-image 开源库

这种方案简单来说就是先把DOM转换为SVG然后再把SVG转换为图片。

优点是体积小，元素齐全，还原度高，缺点是需要自己解决跨域问题，safari不兼容，而且已经没有维护更新了。

第三：canvas 原生绘制

优点是性能比较好，因为用了原生api，不需要考虑兼容性等问题。缺点是需要自己手动写功能，样式排版啥的也要自己处理，还要解决跨域问题。

综上：

如果要处理的页面比较复杂，或者需要支持SVG图片渲染，建议选择html2canvas

如果需要稳定的文字、图片渲染能力或者处理结构化数据的能力，建议选择dom-to-image

如果页面基本是图片资源，那么使用原生canvas性能是最好的。

以上就是这个问题的回答了，大家可以下次面试时试试这么回答看看效果。

最后，欢迎关注理想哥，每天学点前端面试小技巧。