How to convert HTML elements to image with javascript?
Issue
I want to be able to convert HTML elements to images and download them. I tried using html2canvas but I have an error caused by the oklch color function that I’m using
Error: Attempting to parse an unsupported color function "oklch"
Is there any fix to this or any library alternative? I don’t want to change the color library as it is the default from Tailwind
Solution
You can use html2canvas-pro, it has the same api as html2canvas but it supports all the modern color libraries like color, lab, lch, oklab, oklch
Here is an example of how to download a div as an image with it
const downloadElement = () => {
const element = document.getElementById("element-id");
html2canvas(element, {backgroundColor: null}).then(canvas => {
var myImage = canvas.toDataURL();
downloadURI(myImage, );
const link = document.createElement("a");
link.download = "image-filename.png";
link.href = uri;
document.body.appendChild(link);
link.click();
URL.revokeObjectURL(link.href);
});
}