Use existing elements rather than URL

[mspanish]

Great script! I have images that are generated from SVG, not external URLs - so I have img elements I'd like to use with this - I tried converting your script to one that could use existing elements, without much luck. Do you have any tips?

thanks again!
Stacey

[lukechilds]

Hi Stacey,

merge-images just requires an array of any valid image source for an image. So you should be able to just pass your generated images straight in.

What format are they in, data URI?

[mspanish]

Thanks! They are actually SVG that I am generating Data URI pngs for.

[lukechilds]

So you already have the SVG as a PNG data URI and you're trying to compose them together with merge-images? Or you have SVG markup that you're trying to feed into merge-images?

[lukechilds]

@mspanish If you have your SVG as markup (which isn't a valid image source) then you can easily convert them to a data URI like so:

const svgToURI = svg => 'data:image/svg+xml;base64,' + btoa(svg);

This function will convert SVG markup to a data URI which is a valid image source that can then be used by merge-images :

const svgMarkup = `<svg xmlns="http://www.w3.org/2000/svg" height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>`;

const dataURI = svgToURI(svgMarkup);

mergeImages([
  { src: dataURI, x: 25, y: 25 },
  { src: dataURI, x: -25, y: -25,}]
).then(console.log);
// data:image/png;base64,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

Which outputs this PNG of the two SVGs merged together:

Does that solve your problem?

[mspanish]

That is super cool, I'll try it out today and post back. Thanks a ton!

[lukechilds]

@mspanish did you get this sorted? Can I close the issue?

[mspanish]

Ah sorry will test shortly and post back.

[mspanish]

looks to be working just fine - thanks again.

[lukechilds]

Great, no problem 🎉