Foliotek / Croppie

A Javascript Image Cropper
http://foliotek.github.io/Croppie
MIT License
2.58k stars 885 forks source link

Image capture on mobile not working #436

Open 185driver opened 6 years ago

185driver commented 6 years ago

Croppie is working so nicely for me on desktop and on mobile for working with existing images. Many thanks for creating and sharing this excellent tool.

The only thing not working for me at present is capturing images on mobile using the camera. I'm using an Android Nexus 6P and get an error when the image is brought into Croppie.

Here's my code passing the image to Croppie. It's the same code that passes existing images from the file system to it:

cropImage(URL.createObjectURL(file));

And my code that instantiates Croppie:

function cropImage(url) {
  const width = $('#imgBike').width();
  const height = width / 1.6;
  const cropWindow = $('#imgBike').croppie({
    viewport: { width, height },
    boundary: { width, height },
    enableOrientation: true,
  });
  cropWindow.croppie('bind', {
    url,
  });
}

I connected my phone to Chrome remote debugging and the error I get is:

Uncaught TypeError: Cannot read property 'boundary' of undefined

The url being passed by the OS to Croppie is:

blob:https://subdomain.mydomain.com/a68f276e-0bba-4bc1-9b87-f9de2474d0ce

I've tried changing the camera resolution in the camera app's Settings to a low value, but that doesn't seem to be it. I'm using an html input with type="file" as my API for importing images.

Any help would be much appreciated.

Kind regards, Doug

marely76 commented 6 years ago

Did you give permission to the browser to use the camera? I had the same error but I can fix it gave permission to the browser in app settings.

185driver commented 6 years ago

Sorry for my slow response. I just saw this. Thanks for responding. I did give camera permission to the browser. I haven't been able to get back to this issue on my app recently as I'm working on a different part. I hope to look at it again soon. So far, no joy.

thedustinsmith commented 6 years ago

If you get a chance to jump back on this issue, can you try with this branch: https://github.com/Foliotek/Croppie/tree/pre-2.5.2

The error you're getting sounds familiar, but I'm not sure if it will be fixed in there or not.

185driver commented 6 years ago

Thank you. I gave it a try. No change on the camera issue. If it's working for others, I'll need to do some code checking upstream on my end. Oddly, the image .save() method isn't working for me in the pre-2.5.2 branch, but works for me in the stable release. FYI only. Thanks again.