javascript — инициируется ли событие, когда HTML-элемент ссылки (), содержащий данные base64 в виде href, готов?

Событие инициируется, когда готов элемент HTML-ссылки ({amp}lt;a/{amp}gt;), содержащий данные base64 в виде href?

Я создал веб-страницу, которая в основном отображает 2 изображения рядом.

Он имеет кнопку «скачать», которая запускает ванильную функцию Javascript, которая создает HTML-элемент {amp}lt;canvas{amp}gt; и объединяет два изображения внутри него. Затем он создает ссылку с результирующим изображением в кодировке base64 в виде href и нажимает на нее:

{amp}lt;a download="image.png" id="dllink" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABQAAAAMnCAYAAABhnf9DAAAgAElEQVR4nOzdR48kD3rn96j03pfv6qo21dVd3qT3JryP9Jll281..."{amp}gt;{amp}lt;/a{amp}gt;

Вот как выглядит функция, которую я использую:

  / ** 
  * Создайте холст, нарисуйте в нем оба изображения, создайте ссылку с результатом
  * изображение в base64 в поле "href", добавьте ссылку на документ,
  * и нажмите на него
  * /
 функция saveImage () {

     // Получить левое изображение
     var imgLeft = new Image ();
     imgLeft.setAttribute ('crossOrigin', 'anonymous');
     imgLeft.src = "imgleft /"   idxImageShownLeft   ".jpg";
     imgLeft.onload = function () {

         // Как только левое изображение готово, получаем правое изображение
         var imgRight = новое изображение ()
         imgRight.setAttribute ('crossOrigin', 'anonymous');
         imgRight.src = "imgright /"   idxImageShownRight   ".jpg";
         imgRight.onload = function () {

             // Как только правильное изображение будет готово, создайте холст
             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 ("ширина", ширина);
             canv.setAttribute ("высота", высота);
             canv.setAttribute ("id", "myCanvas");
             canv.setAttribute ('crossOrigin', 'anonymous');
             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.

После небольшого исследования я понял, что установив aHref.click(); останова перед aHref.click(); Линия в Chrome, все работало нормально. Я думаю, что это означает, что aHref.click(); вызывается до того, как {amp}lt;a href="data:image/png;base64,...{amp}gt;{amp}lt;/a{amp}gt; будет готово к {amp}lt;a href="data:image/png;base64,...{amp}gt;{amp}lt;/a{amp}gt; , но я точно не знаю.

  • Я не смог найти дубликат этой темы. Какие ключевые слова я должен использовать только для уверенности на 100%?
  • Я расследую в правильном направлении?
  • Есть ли событие, на которое я мог бы положиться, чтобы вызвать aHref.click(); только когда это будет готово?
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector