chore(ci): blog sync

Author: coderPerseus

data/blog/post-39.mdx

@@ -0,0 +1,88 @@
+---
+title: 海报生成踩坑记录，你就直接拿去用吧！
+date: 2025-01-05T05:24:21Z
+slug: post-39
+author: chaseFunny：https://github.com/chaseFunny
+tags: ["bug","经验","png 导出"]
+---
+
+大家好，我是 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
+
+示例效果：
+
+<img src="https://blog-1304565468.cos.ap-shanghai.myqcloud.com/work/image-20250105125626429.png" alt="image-20250105125626429" style="zoom:50%;" />
+
+代码的核心逻辑：
+
+如果是 web 端，就会正常渲染元素，然后使用 dom-to-image 来下载图片，如果是 safari 游览器，需要使用 html2canvas 来兼容图片失效的问题
+
+如果说 h5，就需要对安卓和 ios 进行场景化的兼容，整体逻辑是将 dom 转为图片，利用手机的长按保存图片能力来保存图片
+
+其实在复杂开发中应该还会遇到一些问题，例如：海报高度很高怎么截到想要的部分，大家可以看参考文章
+
+## 参考
+
+1. https://juejin.cn/post/7339671825646338057
+2. https://juejin.cn/post/7417227816162721804
+3. https://juejin.cn/post/6844904165060116487
+
+---
+此文自动发布于：<a href="https://github.com/coderPerseus/blog/issues/39" target="_blank">github issues</a>