Greasy Fork is available in English.

Replace svg to png

Replace all svg to png

// ==UserScript==
// @name         Replace svg to png
// @version      1.0
// @namespace    svn2png
// @description Replace all svg to png
// @author       muxueqz
// @license      GPL
// @include *://*/*
// @grant       GM_registerMenuCommand
// ==/UserScript==

console.log("svg2png init")

const svg2png_single = (svgString, width, height) => {
  return new Promise((res) => {
    var image = new Image();
    image.src = "data:image/svg+xml," + encodeURIComponent(svgString.outerHTML);
    let url = "";
    image.onload = function() {
      var canvas = document.createElement("canvas");
      canvas.width = width;
      canvas.height = height;
      var context = canvas.getContext("2d");
      context.drawImage(image, 0, 0);
      console.log('width and height:', canvas.width, canvas.height)
      url = canvas.toDataURL("image/" + "png", 1.0);
      res(url);
    };
  });
};

async function svg2png() {
  console.log("svg2png get")
  let svgs = document.querySelectorAll('svg')
  console.log("svg2png svgs", svgs)
  for (const i of svgs) {
    let svg_item = document.getElementById(i.id)
    console.log(svg_item.parentNode)
    var height = svg_item.clientHeight
    var width = svg_item.clientWidth

    let png_b64 = await svg2png_single(svg_item, width, height)
    var new_img = new Image();
    new_img.src = png_b64
    // console.log(new_img)
    let parentNode = (svg_item.parentNode)
    parentNode.append(new_img);
    svg_item.remove()
  }
}

GM_registerMenuCommand("SVG to PNG", svg2png);