Open
Description
In order to populate data-image-regions=
, if parsing image metadata on the front-end is good enough, one has to write a bit of boilerplate at the moment, as shown in the CodeSandbox:
const imgElement = document.getElementById("skater");
const image = await fetch(imgElement.src);
const arrayBuffer = await image.arrayBuffer();
const buffer = Buffer.Buffer.from(arrayBuffer);
const parser = new ImageDisplayControl.Parser(buffer);
const regions = parser.getIdcMetadata("rectangle", "crop");
imgElement.dataset.imageRegions = JSON.stringify(regions);
It would be nice to be able to pass a flag to the web-component telling it to do this for us, if ImageDisplayControl.Parser
exists, i.e. if https://github.com/Frameright/image-display-control-metadata-parser has been loaded.
Possible optimization / strech goal
We could then store the parsed metadata in the localstorage in order not to have to parse it again. We need to find a cheap way though to determine when what we have cached is stale.