I'm trying to convert HTML into FabricJS objects so that I can edit visual elements like text boxes, shapes, and images on a canvas. My approach is to parse the HTML using DOMParser and render it in a hidden container. Then I extract positions and styles using getBoundingClientRect() and getComputedStyle(). However, I'm facing issues with unreliable text positioning, incorrect rendering of shapes, and problems with font preservation, especially with icon fonts. I'm looking for recommendations on existing libraries or standard methods for converting HTML to FabricJS objects, and any tips to maintain layout and styling during this process. I know about html2canvas, but I need separate FabricJS objects instead of a rasterized bitmap.
1 Answer
It sounds like a pretty unique project! Given your needs, have you considered fully loading and rendering the document on the backend instead? This approach might help solve some of your issues with reliability since it provides a more complete rendering before you extract elements.
That's actually what I'm doing! I'm using Puppeteer for backend rendering and pulling the document from that. I classify each tree leaf and save the data as JSON for Fabric, but inconsistencies still pop up.