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

Is an event triggered when an HTML link element (<a/>) containing base64 data as href is ready?

本文关键字：gt 准备就绪 事件 包含作 lt 数据 base64 HTML 链接 元素 href      更新时间：2023-09-26

我创建了一个网页，基本上可以并排显示两个图像。

它有一个"下载"按钮，可以触发一个普通的Javascript函数，该函数创建一个<canvas> HTML元素，并将其中的两个图像连接起来。然后，它创建一个链接，将base64编码的结果图像作为href，并点击它：

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

以下是我使用的功能：

/***创建画布，在其中绘制两个图像，创建带有结果的链接*在"href"字段的base64中的图像，将链接附加到文档，*然后点击它*/函数saveImage（）{//获取左侧图像var imgLeft=新图像（）；imgLeft.setAttribute（'crossOrigin'，'anonys'）；imgLeft.src="imgLeft/"+idxImageShownLeft+".jpg"；imgLeft.onload=函数（）{//左图像准备好后，获取右图像var imgRight=新图像（）imgRight.setAttribute（'crossOrigin'，'anonys'）；imgRight.src="imgrid/"+idxImageShownRight+".jpg"；imgRight.onload=函数（）{//准备好正确的图像后，创建画布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"，高度）；canv.setAttribute（"id"，"myCanvas"）；canv.setAttribute（'crossOrigin'，'anonys'）；var ctx=canv.getContext（"2d"）；//在画布中绘制两个图像ctx.drawImage（imgLeft，0，0）；ctx.drawImage（imgRight，widthLeft，0）；//从画布中创建PNG图像var img=canv.toDataURL（"image/png"）；//创建链接元素var aHref=document.createElement（'a'）；aHref.href=img；aHref.setAttribute（"id"，"dllink"）；aHref.download="image.png"；//将链接附加到文档var renderDiv=document.getElementById（"render"）；renderDiv.replaceChild（aHref，document.getElementById（"dllink"））；//单击链接aHref.click（）；}}}

我的问题是，这在Firefox上很好用，但在Chrome上不行。

经过一点研究，我意识到通过在Chrome中的aHref.click();行之前设置断点，它可以很好地工作。我认为这意味着在<a href="data:image/png;base64,...></a>准备好被点击之前，aHref.click();被调用了，但我不确定。

  • 我找不到这个主题的副本。我应该使用什么关键词才能100%确定
  • 我的调查方向是否正确
  • 是否有一个事件可以让我仅在准备就绪时调用aHref.click();

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

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

它类似于普通的jQuery的.ready（）方法。

aHref、document.getElementById("dllink")是否为同一元素？虽然.replaceChild调用时"dllink"尚未附加到document？

尝试替代

renderDiv.appendChild(aHref);

对于

renderDiv.replaceChild(aHref, document.getElementById("dllink"));
相关文章：