当包含base64数据作为href的HTML链接元素(<a/>)准备就绪时,是否触发事件?

我创建了一个基本上并排显示2个图像的webpage .

它有一个"download"按钮,它触发一个vanilla Javascript函数,它创建一个 <canvas> HTML元素并连接其中的两个图像 . 然后它创建一个与base64编码的结果图像的链接为 href 并单击它:

<a download="image.png" id="dllink" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABQAAAAMnCAYAAABhnf9DAAAgAElEQVR4nOzdR48kD3rn96j03pfv6qo21dVd3qT3JryP9Jll281..."></a>

这是我正在使用的功能:

/** 
 * Create canvas, draw both images in it, create a link with the result
 * image in base64 in the "href" field, append the link to the document,
 * and click on it
 */
function saveImage() {

    // Get left image
    var imgLeft = new Image();
    imgLeft.setAttribute('crossOrigin', 'anonymous');
    imgLeft.src = "imgleft/" + idxImageShownLeft + ".jpg";
    imgLeft.onload = function() {

        // Once the left image is ready, get right image
        var imgRight = new Image()
        imgRight.setAttribute('crossOrigin', 'anonymous');
        imgRight.src = "imgright/" + idxImageShownRight + ".jpg";
        imgRight.onload = function() {

            // Once the right image is ready, create the canvas
            var canv = document.createElement("canvas");
            var widthLeft = parseInt(imgLeft.width);
            var widthRight = parseInt(imgRight.width);
            var width = widthLeft + widthRight;
            var height = imgLeft.height;

            canv.setAttribute("width", width);
            canv.setAttribute("height", height);
            canv.setAttribute("id", "myCanvas");
            canv.setAttribute('crossOrigin', 'anonymous');
            var ctx = canv.getContext("2d");

            // Draw both images in canvas
            ctx.drawImage(imgLeft, 0, 0);
            ctx.drawImage(imgRight, widthLeft, 0);

            // Create PNG image out of the canvas
            var img = canv.toDataURL("image/png");

            // Create link element
            var aHref = document.createElement('a');
            aHref.href = img;
            aHref.setAttribute("id", "dllink");
            aHref.download = "image.png";

            // Append link to document
            var renderDiv = document.getElementById("render");
            renderDiv.replaceChild(aHref, document.getElementById("dllink"));

            // Click on link
            aHref.click();
        }
    }
}

我的问题是这在Firefox上运行良好,但在Chrome上运行不正常 .

经过一番调查后,我意识到通过在Chrome中的 aHref.click(); 行之前设置一个断点,它运行正常 . 我认为这意味着 aHref.click(); 被称为 before <a href="data:image/png;base64,...></a> 已准备好被点击,但我不确定 .

  • 我找不到这个主题的副本 . 我应该使用哪些关键字才能100%确定?

  • 我在朝正确的方向调查吗?

  • 是否有一个我可以依赖的事件,只有在准备就绪时才能调用 aHref.click();

提前致谢 .

回答(2)

2 years ago

您可以将它包装在一个init函数中,该函数在窗口完成加载时被调用 .

function init() {
  aHref.click();
}
window.onload = init;

它类似于jQuery的.ready()方法的vanilla .

2 years ago

aHrefdocument.getElementById("dllink") 看起来是同一个元素?虽然在 .replaceChild 调用时 "dllink" 尚未附加到 document

尝试替代

renderDiv.appendChild(aHref);

对于

renderDiv.replaceChild(aHref, document.getElementById("dllink"));