HTML5 Canvas DrawImage Weired Bug

Question

I am trying to upload image and draw image on canvas. I found weird bug. somtimes, draw picture taken from Ios device on canvas. specific picture not showing. below is my code

$(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/