croppie('result', 'canvas') returning blank(black) image

I am opening a local html file with css and javascript inside the html file on Safari v9.0.3. The croppie window is displaying as expected. The image is being uploaded through a form with <input type="file" accept="image/*" multiple name="img[]" id="image" /> The bind method works to display the image and cycles to the next image without a problem. It then cycles on to the appropriate ‘AddTitle’ data-role page. In ‘AddTitle’ the croppie(‘result’, ‘canvas’) is displayed as a blank (black) image in the correct cropped dimensions.
alert(imgString[imageCounter]); shows the same base64 data for the stored image in the array each time it is called (this is the blank black image stored each time). Code is below. Thank you for any suggestions or comments on the code.

I have been looking at problems with the draw buffer, but to my understanding they don’t apply since this is occurring inside the same ‘Cropped’ function?

var imageCounter = 0;
var imgString = [];
var imageArray = [];

function Cropped(){
  var h = $( window ).height();
  var w = $( window ).width();
  var cropWindow = $(".crop");
  cropWindow.croppie({
    viewport: {
          width: 270,
          height: 960,
          type: 'square' //default 'square'
      },
      boundary: {
          width: w,
          height: h
      },
      enableZoom: true, //default true // previously showZoom
      showZoomer: false, //default true
      mouseWheelZoom: true //default true
  });
  imageArray = document.getElementById("image");
  $("#imageUpload").hide();
  var URLString = window.URL.createObjectURL(imageArray.files[imageCounter]);
  cropWindow.croppie('bind', {url: URLString});
  $(document).on('click', '#addPhoto', function cropAction(e){
    e.preventDefault();
    if(imageArray.files.length>0){
      cropWindow.croppie('get');
      cropWindow.croppie("result", {type: "canvas", format: "jpeg"}).then(function(img){
        imgString[imageCounter] = img;
        alert(imgString[imageCounter]);
        imageCounter++;
        cropWindow.croppie("destroy");
        if(imageCounter<imageArray.files.length){
          Cropped();
        }
        else{
          var imgSRC;
          imgSRC = '<img src="' + imgString[0] + '" />';
          $('#imageTest').html(imgSRC);
          $("#redirectToAddTitle").click();
        }
      });
    }
  });
}

[ddonuts]

I’m having the same problem as @Jabinc : On safari (mobile), when the user does not apply any zoom to the image, croppie.result({ type: 'base64', size: 'original' }).then(function(url) { receives a black image. If the users changes the zoom, the received image is correct…

Any news / solution on this issue ?

[panksi]

@thedustinsmith You can see the crop here, and I get the same result when used in our app. So basically what happens is, when you upload too wide image, and rotate it, than somehow calculation of position of the cropped area is not doing its job well.

to reproduce the problem you can go to this codepen: https://codepen.io/cromartie/pen/mWoovd

and then just include any wide image you have (lets say ratio 2:1 or even more).

Hope this helps