最近闲下来了，继续处理rote的一个功能 bug，具体是将笔记生成分享图下载。期间反复设置 cloudflare 的 CORS 设置，换了两款 npm 模块，反复折腾，测试，最后依然是一个不是很完美的状态，这篇文章盘点一下期间遇到的坑，如果你也在实现类似的功能，可能这篇文章对你会比较有帮助，不然就当看个乐了 :@(装大款)
首战告负#
React 的 html 转 image 算是一个挺常用的需求，有现成可用的插件html2canvas，和html-to-image，我最先使用的是 html2canvas ，起初使用还算顺利，在笔记添加标签后却遇到了问题，标签包含背景色，会出现文字背景网上偏移的现象
{rote.tags.map((tag: any, index: any) => {
return (
<span
className={` px-2 rounded-md ${themes[themeIndex].tagClass}`}
key={`tag_${index}`}
>
{tag}
</span>
);
})}
就是这段代码，网页中预览没什么问题，canvas 生图后就会出现文字背景色偏移的 bug。推测可能是 tailwindcss 不兼容？尝试自定义类名，使用原生 css，无效。进行了其他多次尝试，最终怀疑 bug 是 module 的，无奈去掉了背景色。
期间注意到了控制台报错，图片元素出现了跨域的问题，最终生成的图片中 image 元素的位置处显示为一片空白，好嘛，又是我们的老朋友 cors，尝试将 cloudflare R2 的跨域设置改为"AllowedOrigins": ["*"]，报错依然存在，后来翻阅 html2canvas 的文档，尝试添加useCORS: true依然搞不定，最后妥协，去掉了 image 内容。 :@(皱眉)
再次尝试#
gap 了一段时间，心态平和的于师傅有一次尝试解决这个问题，期间爬 stackoverflow 发现了解决办法，需要给图片加上crossOrigin="anonymous"属性，初次以为问题解决，期间也将 module 换成了 html-to-image，标签抽风的问题也解决了，终于能够生成带图片的笔记卡片了 :@(鼓掌) ，然而很快又测试出了问题，开发环境中可以成功生成带图的分享图，然而手机端却又是一片空白，心态大崩 :@(喷血)
从画风逐渐潦草的 commit 中就可以看到我心态的变化 :@(口水)
期间发现了奇怪的现象，如果图片在 canvas 之前缓存过，使用 canvas 的时候会出现问题，依然是跨域的错误，开启停止缓存后，又正常了。 :@(想一想) 通过给图片链接添加?${timestamp}的方法解决了问题，后来发现 html-to-image 有一个 option 实现类似的功能，cacheBust: true，再次以为问题解决。 :@(汗)
然而，到了手机端测试的时候发现图片依然是一片空白，再次测试 pc 端 chrome 又一切正常，我的心态又一次发生了微妙的变化，最终在 html-to-image 的 issue 区发现了类似的情况Image is not showing in some cases iOS, Safari，确认可能是 safari 的问题，采用了评论区的解决办法，问题好像解决了，safari 终于（有机会）正常生图了，为什么是有机会，实际上这个解决办法并不完美，当图片较大的时候，依然有概率出现空白 img 的情况...
到现在，这个功能依然不完美，但是我放弃挣扎了 :@(投降) （暂时）
最后贴一张这个功能生成的图 :@(长草)
