Comments (9)
Thank you for your effort. I will look forward to your fix. Looking at Exif data seems unwieldy. What about using the naturalWidth
and naturalHeight
properties? In which cases does it occur? When the image comes from the camera, camera roll, external url or other? In the first two cases you could try playing with the cordova API options.
Maybe the correctOrientation
option fixes it.
from jr-crop.
I've read that correctOrientation sometimes work and other times doesn't so i've been trying to find something that is more reliable.
Yeah exif in general is not very reliable. As they say about standards, everyone has there own. :D
It seams on safari mobile in ios 9 at least all the width and height properties are flipped, including naturalHeight/Width.
In my case I'm not calling upon the cordova camera api so I can say for sure if that would help. Im using a input field, so i can easily provide additional options of where to select the image for upload like dropbox and other places.
I'll be sure to put up a fix when nail it down :)
from jr-crop.
Currently working through this problem myself. I can move the image and it snaps back into proper place in the middle. I believe it has to do with it calculating x/y before the transform is applied. Reversing the order might fix it.
How did you deal with this issue @ryan-wong ?
from jr-crop.
I wasn't able to fix it.
from jr-crop.
Dang. Gotcha.
Going to take a stab at fixing it. I'll post the fix when I get it figured out.
from jr-crop.
Found the issue. It seams that for some odd reason safari mobile wants to flip width/height on ios. Good times.
Workarounds:
- Look at the Exif data. You'd expect for orientation exif data to be a great guide, but alas it sucks. It seams the best way is to read the pixel data. PixelXDimension : 3840, PixelYDimension : 2160
To get proper width and height. - Preload and append the image to the page.
For some reason when you append the image to the page, it gets it act together and updates the img tag with proper width/height values. Just append the image in the background and read the actual width/height for passing to jcrop.
I'll post an actual fix/workaround here soon.
from jr-crop.
So nailed down a fix, but unfortunately its not as glamorous as i would of liked. I realized that exif wasn't getting the actual height/width but still the flipped (width/height) version that safari was providing. Without a lot of device/browser testing I still haven't been able to find a way to programmatically figure out the real height and width. (Without reading the base64 through some image processer like imagemagic and passing back the real values).
So I decided to go the simplest route possible in this case, make a button and tie to a function to flip the sizes.
Then added this function.
flipImageDimensions: function(){
var self = this;
self.loadImage().then(function(elem) {
self.imgWidth = elem.naturalHeight;
self.imgHeight = elem.naturalWidth;
self.options.modal.el.querySelector('.jr-crop-img').innerHTML = "";
self.options.modal.el.querySelector('.jr-crop-select').innerHTML = "";
self.options.modal.el.querySelector('.jr-crop-img').appendChild(self.imgSelect = elem.cloneNode());
self.options.modal.el.querySelector('.jr-crop-select').appendChild(self.imgFull = elem.cloneNode());
self.bindHandlers();
self.initImage();
});
},
Added this to the initialize function, to expose the new function to the scope.
self.options.flipImageDimensions = this.flipImageDimensions.bind(this);
Then added this to the template variable:
'<button class="button button-clear" ng-click="flipImageDimensions()">Image issues? Click here to try and fix.</button> ' +
Again its not ideal, but it does fix the view issues. Its still flipping the image upon cropping, so need to nail that down. But this should be a good place to start for folks.
Once I get the image cropping issue nailed down I'll post that as well, of course once I'm all finished I'll post a more official patch.
from jr-crop.
i have the same problem large image portrait it not appear at center it appears at bottom left
any ideas?
from jr-crop.
Im actually getting this exact error, I think with the ideas given here I'll try to fix the plugin.……
--UPDATE--
adding the option correctOrientation: true
to the getPicture options of $cordovaCamera did the trick, no more trouble.
from jr-crop.
Related Issues (20)
- Roadmap for next major release HOT 1
- `crop()` promise resolved with empty object HOT 4
- use interpolateProvider HOT 6
- How do I crop a full-hd image to a resolution that doesn’t fit on the device? HOT 17
- Plugin increases the file size after cropping in ionic .Cropped images are larger than original images HOT 8
- How to resize and crop at different size? HOT 8
- Seems it doesn't have canvas size limit check?
- Cached first photo on IOS9 with ionic HOT 1
- Cordova android issue HOT 14
- Change crop box size
- Crop box not appear in small screen
- Plugin not work in version greater than android 5.1.1 HOT 1
- Orientation
- Image not showing completely in modal
- Large image Not corpping
- How to dynamically change the square/circle selection height&width/radius
- Background color for small image HOT 3
- Add showGrid option to show grid upon the part being cropped.
- Ionic 2 Support feature. HOT 2
- Image not showing in modal HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from jr-crop.