Кроссплатформенный файловый ридер / проблемы с изменением размера изображения

Question

У меня есть фрагмент кода (см. Фрагмент кода ниже), который позволяет мне загрузить изображение и который затем изменяет размер изображения в зависимости от размеров окна.

Все отлично работает на ПК / Chrome, но во время тестирования на ПК / Safari, Mobile / Chrome или Mobile / Safari я столкнулся со странным поведением: загруженное изображение не будет отображаться, а также data-url заполнен неправильно, в результате DataURL: data:, вместо DataURL: data:image/png;base64,iVBORw0KGgo ...

Я попытался решить проблему, добавив await функции, но это мало что изменило.

Другие люди, похоже, никогда не сталкивались с подобными проблемами - или они не тестировали свое решение кросс-браузер / кросс-устройство - (выполнили поиск: { ссылка })?

Спасибо!

var img0;
      var myArray;
      var rtrnValue1;
      var rtrnValue2;
      var result;
      var response;
      var observer;

window.addEventListener('load', function() {
        document.getElementById('sf_0').addEventListener('change', async function() {
          if (document.getElementById('sf_0').files[0]) {
              img0 = document.getElementById('image_0');
              var reader = new FileReader();
              var file = document.getElementById('sf_0').files[0];
              var imageType = /image.*/;
              reader.onload = async function () {
                  var tmp_img = new Image();
                  await getResult(tmp_img);
                  async function getResult(img){
                    img.src = await reader.result;
                    return img;
                  }

                  res = await resizeImage()
                  function resizeImage() {

                    var canvas = document.createElement("canvas");
                    var ctx = canvas.getContext("2d");
                    ctx.drawImage(tmp_img, 0, 0);

                    var maxWidth = window.outerWidth * 0.5;
                    var maxHeight = window.outerHeight * 0.5;

                    var newDims = calculateAspectRatioFit(tmp_img.width, tmp_img.height, maxWidth, maxHeight);
                    
                    canvas.width = newDims.width;
                    canvas.height = newDims.height;
                    var ctx = canvas.getContext("2d");
                    ctx.drawImage(tmp_img, 0, 0, newDims.width, newDims.height);
                    return canvas;

                  }

                  img0.src = await res.toDataURL();
                  document.getElementById('data-url').innerHTML = img0.src;

              
              };
              await reader.readAsDataURL(file);
              reader.onerror = function (error) {
                console.log('Error: ', error);
              };
              
          } else {

          }
        });
      });

      function calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight) {
        var ratio = Math.min(maxWidth / srcWidth, maxHeight / srcHeight);
        return { width: srcWidth*ratio, height: srcHeight*ratio };
      }

<div class='box'>
  <div class='row'>
    <input class="source-file" id="sf_0" type='file' />
    <br>
    <img class="target-image" id="image_0" alt="image_0" src="#">
  </div>
</div>

<div class="footer">
  <div class="others">
    <p><code>DataURL:</code><span id="data-url"></span></p></div>
</div>