Hello
Recently we have encountered an error where the Export To Image functionality is not working, as HTML2Canvas is breaking because of an unsupported color scheme definition "oklch". This color definition is implemented in our project through the popular framework TailwindCSS 4.
As we also use HTML2Canvas in other parts of our project, and have sideloaded a fork of the HTML2Canvas project to support this color scheme and other modern features, as the original HTML2Canvas project is abandoned or scarcely maintained. Here is the fork in question: https://github.com/yorickshan/html2canvas-pro
We want to suggest you explore and fix this issue, as the web is adopting new color definitions through widely used frameworks like TailwindCSS 4, which uses oklch for their color definitions as well.
To reproduce the error, we suspect it would suffice to have a simple page running with TailwindCSS and Flexmonster and try to Export to Image, and it might bring about the error.
Thank you in advance
Hello Casper,
Thank you for contacting us and sharing your fork of the HTML2Canvas project.
For the described use case involving modern CSS color functions, we recommend using a patched version of HTML2Canvas that supports these features, such as your html2canvas-pro project.
Flexmonster resolves HTML2Canvas from the global scope via window["html2canvasV1"]. You can override it in the following way:
import Flexmonster from "flexmonster";
import html2canvas from "html2canvas-pro";
// Important: this must be done after Flexmonster is imported
// so that the default implementation is properly overridden
window["html2canvasV1"] = html2canvas;
Ensuring that window["html2canvasV1"] is assigned after Flexmonster is loaded is crucial, as Flexmonster initializes its default HTML2Canvas implementation during import.
With this approach, Flexmonster’s Export to Image functionality can use a modern HTML2Canvas implementation and work correctly.
Please let us know if it works for you. Looking forward to hearing from you.
Kind regards,
Nadia
Hello Nadia
We have implemented the change, and it seems to be working as intended
Thank you for your thorough and quick response.
Hello Casper,
Thank you for the feedback!
We are glad to hear that the suggested solution works for you.
Do not hesitate to contact us if other questions arise.
Kind regards,
Nadia