包含base64数据as href的HTML链接元素（）准备就绪时是否触发事件？

Question

我创建了一个基本上并排显示2个图像的网页。

它有一个下载按钮，触发一个香草Javascript函数，该函数创建一个

下面是我正在使用的函数的样子：

/** 
 * 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上不行。

经过一点调查，我意识到通过在aHref之前设置一个断点。单击（） 镀铬线条，效果很好。我认为这意味着aHref。单击（）

• 我找不到这个话题的副本。我应该使用什么关键词才能100%确定？
• 我调查的方向对吗？
• 是否有一个事件我可以依靠，以便调用aHref.click（）；只有当它准备好了？




Answer 1

aHref，文档。getElementById（“dllink”）是否显示为相同的元素？虽然“dllink”尚未在时附加到文档中。是否调用了replaceChild？

试着代入

renderDiv.appendChild(aHref);

对于

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

Answer 2

您可以将其包装在初始化函数中，当窗口完成加载时调用该函数。

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

它类似于jQuery的普通等价物。ready（）方法。