Recently, I had some free time and continued to work on a bug in rote. Specifically, it was about generating a shareable image of a note for download. During the process, I repeatedly adjusted the CORS settings of Cloudflare and tried two npm modules, but after numerous attempts and tests, the result was still not perfect. This article summarizes the pitfalls I encountered during this period. If you are also implementing a similar feature, this article may be helpful to you. Otherwise, just enjoy reading it :@(装大款).
First Defeat#
Converting HTML to an image in React is a quite common requirement. There are ready-to-use plugins like html2canvas and html-to-image. I initially used html2canvas, and it went smoothly at first. However, I encountered a problem when adding tags to the note. When the tags had a background color, the text background would shift.
{rote.tags.map((tag: any, index: any) => {
return (
<span
className={` px-2 rounded-md ${themes[themeIndex].tagClass}`}
key={`tag_${index}`}
>
{tag}
</span>
);
})}
This piece of code worked fine in the web preview, but the generated image had a bug where the text background color was shifted. I suspected that it might be due to incompatibility with Tailwind CSS. I tried using custom class names and native CSS, but it didn't work. After several other attempts, I finally suspected that the bug was related to modules, so I reluctantly removed the background color. :@(皱眉)
Second Attempt#
After a while, I calmly made another attempt to solve this problem. During this process, I crawled through Stack Overflow and found a solution. It required adding the crossOrigin="anonymous" attribute to the image. I also switched to using html-to-image instead of html2canvas, which resolved the issue with the tags acting up. Finally, I was able to generate note cards with images :@(鼓掌). However, soon after, I encountered another problem. While it worked fine in the development environment, the image was blank on mobile devices. My frustration grew :@(喷血).
You can see the change in my mood from the gradually messy commits :@(口水)
During this period, I noticed a strange phenomenon. If the image was cached before the canvas was used, there would be a problem with cross-origin errors. After disabling caching, it worked normally again. :@(想一想) I solved this problem by adding ?${timestamp} to the image URL. Later, I discovered that html-to-image had an option that achieved a similar result: cacheBust: true. I thought the problem was finally solved. :@(汗)
However, when I tested it on a mobile device, the image was still blank. On the PC side, everything was fine in Chrome. My mood underwent another subtle change. Eventually, I found a similar situation in the issue section of html-to-image: Image is not showing in some cases iOS, Safari. It seemed to be a problem with Safari. I adopted a solution from the comments, and the problem seemed to be resolved. Safari finally (had a chance to) generate images correctly. However, this solution is not perfect. When the image is large, there is still a chance of encountering a blank image...
Until now, this feature is still not perfect, but I have given up struggling :@(投降) (for now)
Finally, I'll share an image generated by this feature :@(长草)
