0

I'm currently using Jdenticon library for generating user identicons as a default profile picture. I'd like to convert the data URI for SVG to a Blob or make it as an image file so that I could store an image file into Firebase.

I've tried a few example code from Stack Overflow, but none of them were worked for me. (I've not converted the data into base64. I don't think SVG syntax has any crazy characters in it.)

createIdenticonBlob(hash: string) {
  if (hash) {
    let svg = jdenticon.toSvg(hash, Math.min(50, 50));
    let uri = "data:image/svg+xml," + encodeURIComponent(svg);
    return this.uploadService.convertDataURIToBlob(uri); // I'm not sure :(
  }
}

jdenticon.toSvg(hash|value, size[, padding])

I'm not sure how to convert Data URI to an image file. Any thoughts?

JeffMinsungKim
  • 1,940
  • 7
  • 27
  • 50
  • Is `svg` encoded in base64? – Kaiido Feb 27 '18 at 08:53
  • As I said, I've not converted SVG into base64. Should I? – JeffMinsungKim Feb 27 '18 at 09:40
  • No, it's just that the example in your link is encoded to b64. So if you confirm it's not, all you need is `new Blob([svg], {type:"image/svg+xml"})` – Kaiido Feb 27 '18 at 09:43
  • Thanks for your answer Kaiido. I've made a very simple mistake. I'll accept your answer if you leave it as an answer. One more thing btw, I'd like to store an image in a JPEG format. Any ideas? – JeffMinsungKim Feb 27 '18 at 09:57
  • That'a a completely different question that has already been answered many times. Look to "svg to raster javascript" or "svg to png javascript". ( you dont want jpeg) – Kaiido Feb 27 '18 at 10:03

1 Answers1

0

You don't want to convert a dataURI to a file, you want to make a file from the svg markup, which is just text, and if your plugin really returns an svg markup, this is really easy to do:

createIdenticonBlob(hash: string) {
  if (hash) {
    let svg = jdenticon.toSvg(hash, Math.min(50, 50));
    let blob = new Blob([svg], {type: 'image/svg+xml'});
    return blob;
  }
}
Kaiido
  • 123,334
  • 13
  • 219
  • 285