HTML5渲染，保存png blob文件（不起作用）

Question

我试图使与画布渲染相关的代码正常工作。如果发布了网络，它就可以工作，但是无法在本地运行html文件

function render () {
    var ctx = document.getElementById("render").getContext("2d");
    ctx.imageSmoothingEnabled = false;
    ctx.drawImage(imgCache[weather], 0, 0, 1600, 960);
    ctx.drawImage(document.getElementById("background"), 0, 0, 1600, 960);
    ctx.drawImage(document.getElementById("foreground"), 0, 0, 1600, 960);
    ctx.drawImage(document.getElementById("water"), 0, 0, 1600, 960);
    var a = document.createElement('a');
    a.style.visibility = "hidden";
    document.body.appendChild(a);
    a.href = document.getElementById("render").toDataURL();
    a.download = "renderworld.png";
    if (window.navigator.userAgent.indexOf("Edge") === -1) {
      a.click();
      a.remove();
    } else {
      var blob = new Blob([b64toBlob(document.getElementById("render").toDataURL().replace(/^data:image\/(png|jpg);base64,/, ""),"image/png")], {type: "image/png"});
      navigator.msSaveBlob(blob, "renderworld.png");
    }

当我单击该“渲染”按钮时，什么也没有发生，它应该自动为我下载渲染画布的png。”