导出的 Canvas 图像变黑

Question

Im trying to export a svg string as PNG using advice i found here . I changed it a little bit and tried exporting in Chrome. That works like acharm. The problem is exporting in Firefox as there the image is always just black.

  const svg = `...`;
  const exportAsPNG = () => {
    const canvas = document.createElement('canvas');
    const context = canvas.getContext('2d');

    canvas.width = PNG_WIDTH; // my width
    canvas.height = PNG_HEIGHT; // my height

    const image = new Image();
    image.onload = () => {
      if (context) {
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.fillStyle = context.createPattern(image, 'no-repeat') as CanvasPattern;
        context.fillRect(0, 0, canvas.width, canvas.height);

        const a = document.createElement('a');
        a.href = canvas.toDataURL('image/png');
        a.download = ConstantValues.EXPORT_PNG_NAME;
        a.click();
        a.remove();
      }
    };
    image.src = `data:image/svg+xml;base64,${btoa(svg)}`;
  };

Answer 1

function download(type,svg) {
    let canvas = document.createElement("canvas");
    let ctx = canvas.getContext("2d");
    let svg_clone = svg.cloneNode(true);
    svg_clone = add_background(svg_clone);
    let file, url, base64 = null;
    let img = new Image();
    canvas.setAttribute("width", parseInt(svg_clone.getAttribute("width")));
    canvas.setAttribute("height", parseInt(svg_clone.getAttribute("height")));
    try {
        file = new Blob([svg_clone.outerHTML], { type: "image/svg+xml" });
    } catch (e) {
        file = new File([svg_clone.outerHTML], { type: "image/svg+xml" });
    }
    url = window.URL.createObjectURL(file);
    img.addEventListener("load", function () {
        ctx.drawImage(img, 0, 0);
        window.URL.revokeObjectURL(url);
        if (type == "png") {
            base64 = canvas.toDataURL("image/png");
        } else if (type == "jpeg") {
            base64 = canvas.toDataURL("image/jpeg");
        }
        down_href(base64, type);
    });
    img.src = url;
}
function down_href(file, type) {
    let a = document.createElement("a");
    a.setAttribute("href", file);
    a.setAttribute("download", "file." + type);
    a.click();
}
function add_background(svg) {
    let rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
    rect.setAttribute("x", "0%");
    rect.setAttribute("y", "0%");
    rect.setAttribute("width", "100%");
    rect.setAttribute("height", "100%");
    rect.style.fill = "#ffffff";
    rect.style.vectorEffect = "non-scaling-stroke";
    rect.style.stroke = "none";
    rect.style.strokeWidth = "0";
    rect.style.strokeDasharray = "0";
    rect.style.strokeDashoffset = "0";
    rect.style.strokeLinejoin = "miter";
    rect.style.strokeLinecap = "butt";
    rect.style.paintOrder = "stroke";
    svg.insertAdjacentElement("afterbegin", rect);
    return svg;
};
download("png",svg_element);