Replace data:image urls in JSON

gistfile1.txt

import fs from "fs";
import uuid from "uuid/v1";

const replaceDataImg = (string) => {
  const data = string.replace(/^data:image\/\w+;base64,/, "");
  const buf = new Buffer(data, 'base64');
  const name = `server/files/${uuid()}.png`;
  fs.writeFile(name, buf, (error) => { if(error) console.log("Error!", error)});
  return `"${name}"`;
}


const replaceImagesInHTML = (html) => {
  const regex = /"data:image\/([a-zA-Z]*);base64,([^\"]*)\"/g;
  const images = html.match(regex);
  images.forEach(img => {
    const newImg = replaceDataImg(JSON.parse(img));
    html = html.replace(img, newImg);
  });
  return html;
}


export {replaceImagesInHTML}

I use this to send HTML json with data:image as tags src-es then in backend i replace the data:image with real .png image file location.

And boom you can load the HTML and it contains tags with file urls instead.