HTML5 Canvas DrawImage 奇怪的错误

Question

我正在尝试上传图像并在画布上绘制图像。 我发现了奇怪的错误。 有时，在画布上绘制从 Ios 设备拍摄的图片。 具体图片不显示。 下面是我的代码

$(document).ready(function() {


  var readURL = function(input) {
    if (input.files && input.files[0]) {
      var reader = new FileReader();

      reader.onload = function(e) {
        console.log(e.target.result)
        $('.profile-pic').attr('src', e.target.result);
        const img = new Image();
        img.crossOrigin = 'Anonymous'; //UNICORNex-6606
        img.onload = () => {
          const canvas = document.createElement('canvas');
          canvas.width = img.width;
          canvas.height = img.height;
          const ctx = canvas.getContext('2d');

          ctx.drawImage(img, 0, 0, img.width, img.height);
          document.body.appendChild(canvas);
        };
        img.src =e.target.result;

      }

      reader.readAsDataURL(input.files[0]);
    }
  }


  $(".file-upload").on('change', function() {
    readURL(this);
  });

  $(".upload-button").on('click', function() {
    $(".file-upload").click();
  });
});

https://jsfiddle.net/happenask/amt46fL2/3/