Recently, I had some free time and continued to work on a bug in the "rote" function, specifically generating a shareable image of the notes for download. During the process, I repeatedly set up the CORS settings for Cloudflare, tried two npm modules, and tested them. In the end, it was still not in a perfect state. This article summarizes the pitfalls I encountered during this period. If you are also implementing a similar function, 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, which went smoothly at first. However, I encountered a problem after adding tags to the notes. When the tags had a background color, there was a phenomenon of text background offset on the web.
{rote.tags.map((tag: any, index: any) => {
return (
<span
className={` px-2 rounded-md ${themes[themeIndex].tagClass}`}
key={`tag_${index}`}
>
{tag}
</span>
);
})}
It was this piece of code. There was no problem in the web preview, but the bug of text background color offset appeared after generating the image with canvas. I suspected that it might be incompatible with Tailwind CSS. I tried using custom class names and native CSS, but it didn't work. I made several other attempts, but in the end, I suspected that the bug was in the module and reluctantly removed the background color. :@(皱眉)
Second attempt#
After a while, I calmly made another attempt to solve this problem. During this process, I crawled 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, and the problem with the tags acting up was resolved. Finally, I was able to generate note cards with images. :@(鼓掌) However, I quickly discovered another problem. While it worked in the development environment, the image was blank on mobile devices. My frustration grew. :@(喷血)
You can see the change in my attitude from the gradually sloppy commits. :@(口水)
During this period, I noticed a strange phenomenon. If the image was cached before the canvas, there would be a problem, and the same cross-origin error occurred. After disabling the cache, it worked normally again. :@(想一想) I solved the problem by adding ?${timestamp} to the image link. Later, I found that html-to-image had an option that achieved a similar function, cacheBust: true. I thought the problem was solved again. :@(汗)
However, when I tested it on a mobile device, the image was still blank. On the PC side, everything was normal again. My attitude changed subtly once again. Finally, I found a similar situation in the issue section of html-to-image, Image is not showing in some cases iOS, Safari. It confirmed that it might be a problem with Safari. I adopted the solution from the comments section, and the problem seemed to be solved. Safari finally (had a chance to) generate images normally. However, this solution is not perfect. When the image is large, there is still a chance of a blank image...
Until now, this function is still not perfect, but I give up struggling. :@(投降) (For now)
Finally, I'll share an image generated by this function. :@(长草)
