svg2canvas

example.js

// Example of svg -> b64
function svgTob64(svg_str) {
    return "data:image/svg+xml;base64," + btoa(unescape(encodeURIComponent(svg_str)));
}


const get_image = b64  =>
  new Promise((res, rej) => {
    var img = new Image();
    img.addEventListener("load", () => res(img));
    img.addEventListener("error", (e) => rej(e.message));
    img.setAttribute("src", b64);
  });

const useSvgToCanvas = b64s => {
  let [ready, set_ready] = React.useState(false);

  let ref = React.useRef(null);

  React.useEffect(() => {
    let fn = async () => {
      try {
        let canvas = ref.current;
        let ctx = canvas.getContext("2d");
        canvas.width = 1024;
        canvas.height = 1024;
        for (let b64 of b64s) {
          let img = await get_image(b64);
          ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
        }

        set_ready((_) => true);
      } catch (e) {
        console.log("Image render error");
      }
    };

    if (!!ref.current && b64s?.length) {
      fn();
    }
  }, [b64s?.length]);

  return [ref, ready];
};