海报生成踩坑记录，你就直接拿去用吧！
大家好，我是 luckySnail。不知不觉，已经做过很多次海报功能了，但是在新开发海报页面的时候还是会踩已经踩过的坑，海报能力是日常前端开发中经常会遇到的。例如：年度总结，活动分享，优惠券分享，推广分享等等。如果你也开发过海报功能，不知道你们是否也遇到了这些头疼的问题：
自定义文字字体
兼容 ios 端展示和下载
文章展示没有问题，但下载后内容掉下来？
在线图片展示不了？
下载和展示不一致？
移动端如何下载？微信内怎么保存海报？
如果你遇到上面的一种，那你不用再找了，我要一口气讲清楚这些坑的解决方案，最终给你一个兼容性良好的海报生成示例代码。本文章更多分享海报开发过程中遇到的问题，如果你想要全面了解将海报下载的方案，请看：https://www.luckysnail.cn/posts/post-20 。下面我们进入正题：
海报功能简介
海报功能通常是指根据用户的需求，动态生成一张图片，这张图片可以包含：
- 文字
- 图片（可以是本地图片，也可以是远程图片）
- 二维码等多种元素。
生成的海报可以用于分享、推广等场景。前端开发真实业务开发中，使用最多的应该就是通过 html2canvas 或者 dom-to-image 来生成海报了。
海报页面开发 & 下载
如果你打算开发一个海报页面，最好不要直接开发。在你开发之前你需要确认好这几件事情：
1、海报展示的平台：网页端；移动端；需要打印？
2 、海报的分辨率：确定海报所需的分辨率，以保证在不同设备上的清晰度。
3 、海报的尺寸：需要了解常用的海报尺寸，确认要开发的海报尺寸是多少
4 、海报展示哪些内容：文字；图片；二维码；如果是动态内容是否会溢出；是否使用了自定义字体
当我们确认好上面的内容后，通常这时候我们会拿到海报设计稿、动态内容规则和需要的相关装饰图片，我们接下来就可以确认技术方案 + 开发周期了。在页面开发完成后，我们会使用 html2canvas 或者 dom-to-image 来生成图片，这时候我们可能会遇到一些问题
1 、远程图片无法展示
如果这里不是因为跨域导致的，通常是因为图片缓存的问题。我们可以在原图片 url 后添加 '?timestamp=' + Date.now() 以确保每次请求时不会使用缓存的头像
2、自定义文字
如果我们海报中包含自定义字体
3 、特殊样式兼容性问题
在 html2canvas 中，某些先进的 css 属性会出现不兼容的情况，例如设置字体的渐变背景，如果使用到需要兼容
4 、ios 和 androad 兼容
ios 由于其默认的 safari 游览器，导致使用 dom-to-image 的时候会出现兼容性很差的情况，这时候，我们就需要使用 html2canvas 来兼容
示例代码
仓库地址：https://github.com/chaseFunny/react-poster
示例效果：
代码的核心逻辑：
如果是 web 端，就会正常渲染元素，然后使用 dom-to-image 来下载图片，如果是 safari 游览器，需要使用 html2canvas 来兼容图片失效的问题
如果说 h5，就需要对安卓和 ios 进行场景化的兼容，整体逻辑是将 dom 转为图片，利用手机的长按保存图片能力来保存图片
其实在复杂开发中应该还会遇到一些问题，例如：海报高度很高怎么截到想要的部分，大家可以看参考文章
参考
- https://juejin.cn/post/7339671825646338057
- https://juejin.cn/post/7417227816162721804
- https://juejin.cn/post/6844904165060116487
此文自动发布于：github issues