Rendering HTML to images with SVG foreignObject
Sep 4 2019 · Web Technologies
Motivation
For applications that allow users to create visual content, being able to generate images of their work can be important in a number of scenarios: preview/opengraph images, allowing users to display content elsewhere, etc. This popped up as a need for ScratchGraph and led me to research a few possible solutions. Using the SVG <foreignObject> element was one of the more interesting solutions I came across, as all rendering and image creation is done client-side.
<foreignObject> to Image
<foreignObject> is a somewhat strange element. Essentially, it allows you to load and render arbitrary HTML content within SVG. This in and of itself isn’t helpful for generating an image, but we can take advantage of two other aspects of modern browsers to make this a reality:
- SVG markup can be dynamically loaded into an Image by transforming the markup into a data URL
- Data URL length limits are no longer a concern. We no longer have the kilobyte-scale limits we were dealing with a few years ago
Sketching it out, the process looks something like this (contentHtml is a string with the HTML content we want to render):
The code for this is pretty straightforward:
// build SVG string
const svg = `
<svg xmlns='http://www.w3.org/2000/svg' width='${width}' height='${height}'>
<foreignObject x='0' y='0' width='${width}' height='${height}'>
${contentHtml}
</foreignObject>
</svg>`;
// convert SVG to data-uri
const dataUri = `data:image/svg+xml;base64,${window.btoa(svg)}`;
Here I’m assuming contentHtml is valid and can be trusted. If that’s not the case, you’ll likely need some pre-processing steps before sticking it into a string like this.
The code above works, to a degree; there’s a few key limitations to be aware of:
- Cross-origin images served without CORS headers won’t load within <foreignObject>
- Styles declared via stylesheets do not pass through to the contents of <foreignObject>
- External resources (images, fonts, etc.) won’t be in the generated Image, as the browser doesn’t wait for these resources to be loaded before rendering out the image
The cross-origin issue may be annoying and unexpected (as the browser does load these images), but it’s a valid security measure and CORS provides the mechanism around it.
Handling stylesheets and external resources are more important concerns, and addressing them allows for a much more robust process.
Handling stylesheets
This isn’t anything too fancy, here are the steps involved:
- Copy all the style rules, from all the stylesheets, in the parent document
- Wrap all those rules in a <style> tag
- Prepend that string to the contentHtml string
The code for this precursor step looks something like this:
const styleSheets = document.styleSheets;
let cssStyles = "";
let urlsFoundInCss = [];
for (let i=0; i<styleSheets.length; i++) {
for(let j=0; j<styleSheets[i].cssRules.length; j++) {
const cssRuleStr = styleSheets[i].cssRules[j].cssText;
cssStyles += cssRuleStr;
}
}
const styleElem = document.createElement("style");
styleElem.innerHTML = cssStyles;
const styleElemString = new XMLSerializer().serializeToString(styleElem);
...
contentHtml = styleElemString + contentHtml;
...
Handling external resources
My solution here is somewhat curd, but it’s functional.
- Find url values in the CSS code or src attribute values in the HTML code
- Make XHR requests to get these resources
- Encode the resources as Base64 and construct data URLs
- Replace the original URLs (in the CSS url or HTML src) with the new base64 data URLs
The following shows how this is done for the HTML markup (the process is only slightly different for CSS).
const escapeRegExp = function(string) {
return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
};
let urlsFoundInHtml = getImageUrlsFromFromHtml(contentHtml);
const fetchedResources = await getMultipleResourcesAsBase64(urlsFoundInHtml);
for(let i=0; i<fetchedResources.length; i++) {
const r = fetchedResources[i];
contentHtml = contentHtml.replace(new RegExp(escapeRegExp(r.resourceUrl),"g"), r.resourceBase64);
}
The getImageUrlsFromFromHtml() and parseValue() methods that extract the value of src attributes from elements:
/**
*
* @param {String} str
* @param {Number} startIndex
* @param {String} prefixToken
* @param {String[]} suffixTokens
*
* @returns {String|null}
*/
const parseValue = function(str, startIndex, prefixToken, suffixTokens) {
const idx = str.indexOf(prefixToken, startIndex);
if(idx === -1) {
return null;
}
let val = '';
for(let i=idx+prefixToken.length; i<str.length; i++) {
if(suffixTokens.indexOf(str[i]) !== -1) {
break;
}
val += str[i];
}
return {
"foundAtIndex": idx,
"value": val
}
};
/**
*
* @param {String} str
* @returns {String}
*/
const removeQuotes = function(str) {
return str.replace(/["']/g, "");
};
/**
*
* @param {String} html
* @returns {String[]}
*/
const getImageUrlsFromFromHtml = function(html) {
const urlsFound = [];
let searchStartIndex = 0;
while(true) {
const url = parseValue(html, searchStartIndex, 'src=', [' ', '>', '\t']);
if(url === null) {
break;
}
searchStartIndex = url.foundAtIndex + url.value.length;
urlsFound.push(removeQuotes(url.value));
}
return urlsFound;
};
The getMultipleResourcesAsBase64() and getResourceAsBase64() methods responsible for fetching resources:
/**
*
* @param {String} url
* @returns {Promise}
*/
const getResourceAsBase64 = function(url) {
return new Promise(function(resolve, reject) {
const xhr = new XMLHttpRequest();
xhr.open("GET", url);
xhr.responseType = 'blob';
xhr.onreadystatechange = async function() {
if(xhr.readyState === 4 && xhr.status === 200) {
const resBase64 = await binaryStringToBase64(xhr.response);
resolve(
{
"resourceUrl": url,
"resourceBase64": resBase64
}
);
}
};
xhr.send(null);
});
};
/**
*
* @param {String[]} urls
* @returns {Promise}
*/
const getMultipleResourcesAsBase64 = function(urls) {
const promises = [];
for(let i=0; i<urls.length; i++) {
promises.push( getResourceAsBase64(urls[i]) );
}
return Promise.all(promises);
};
More code
The code for this experiment is up on Github. Most functionality is encapsulated with the ForeignHtmlRenderer method, which contains the code shown in this post.
Other Approaches
- Similar (same?) approach with dom-to-image
This library also uses the <foreignObject> element and an approach similar to what I described in this post. I played around with it briefly and remember running to a few issues, but I didn’t keep the test code around and don’t remember what the errors were. - Server-side/headless rendering with puppeteer
This seems to be the defacto solution and, honestly, it’s a pretty good solution. It’s not too difficult to get it up and running as a service, though there will be an infrastructure cost. Also, I’d be willing to bet this is what services like URL2PNG use on their backend. - Client-side rendering with html2canvas
This is a really cool project that will actually parse the DOM tree + CSS and render the page (it’s a rendering engine done in client-side javascript). Unfortunately, only a subset of CSS is supported and SVG is not supported.
![color transformation matrix, [[0, 0, 0, 0, R], [0, 0, 0, 0, G], [0, 0, 0, 0, B], [0, 0, 0, 1, 0]][(0), (0), (0), (A_(src))] = [(R), (G), (B), (A_(src))]](https://semisignal.com/uploaded_images/black-pixel-color-transform.svg){kind=tracking}
