Comments (13)
I found that using the photo I just take , the picture can't show, just blank. This problem only occur when I using the back-facing camera. I don't know why. I tested it in iPhone5s.
from croppie.
Yes. I came across the issue that @BabysbreathJJ had mentioned before. And I fixed it with ios-imagefile-megapixel. It seems that for some versions of the IOS(mainly 8.x back camera only), enabling the EXIF in Croppie will lead to the failure of loading the image. Once I disabled the EXIF, nothing goes wrong only that I cannot rotate the image. This is caused by an IOS bug of Canvas. At last I used ios-imagefile-megapixel to compress the image (pixels) first and get the orientation of it manually with EXIF, then passing the compressed image to croppie with enableExif false. This bug does not occur in IOS 9.2(Don't really know which version it is fixed.)
`var canvas1 = document.getElementById('again-resultImage');
var reader = new FileReader();
var orientation = 1;
reader.onloadend = function(e) {
var image = new Image();
image.onload = function() {
EXIF.getData(image, function() {
// console.log(EXIF);
orientation = EXIF.getAllTags(this).Orientation;
mpImg.render(canvas1, { maxWidth: 500, maxHeight: 500, quality: 0.5, orientation: orientation }, function(){
$uploadCrop.croppie('bind', {
url: canvas1.toDataURL('image/jpeg', 0.4),
// orientation: 8
});
$('.upload-again-preview').addClass('ready');
canUploadAgain = true;
});
});
};
image.src = e.target.result;
};`
from croppie.
You might be referring to the same issue described in #37.
If so, you can try grabbing the latest, and see if that fixes your issue.
from croppie.
Thanks
Yes I know this issue, I'm using the latest updated version of croppie that has if(src.substring(0,4).toLowerCase()==='http') {
img.setAttribute('crossOrigin', 'anonymous');
} included. I tried commenting out the if (setting the attribute without if), but all the same plus the issue discribed in #37 (image not fitted in boundary)
from croppie.
Sorry - I really don't understand the issue you're having, and I don't have an iPhone to test it out. Have you tried remote debugging your iPhone and see if there's an error in your console when you're setting the src
attribute?
from croppie.
Ahh, seems like it's because of the photos taken on iPhone 6S (I guess so, as it works with other images). It has some new features for camera (it records a very short video and the photo itself). Though I was trying to upload the photo, that has .jpeg extension, it didn't work. But it works with any other photo. I don't have Mac for remote debugging so I don't know the error exactly. When I try to upload the same image from windows, it works but very slowly
from croppie.
Could one of you upload a sample photo that you're unable to crop to this github issue? I don't have an iPhone to test with, my android devices work fine.
from croppie.
@thedustinsmith sorry for late response.
Problem is that when I send the photos via email and try to upload it from my computer it works okay. The problem is on IOS. Anyway find the photo attached
Here is the test case
- iPhone 6S IOS 9 back camera, normal mode
Orientation landscape - The cropped result is rotated
Orientation protrait The result is empty
Here's the link where I test to upload
http://kadmos.li/lus/and/well/t1.html
Thanks
Lusine
from croppie.
@k-lusine i think that you have "image orientation problem". When you have uploaded image to the server try to call function correctImageOrientation($file_distionation).
PHP Code
function correctImageOrientation($filename) {
if (function_exists('exif_read_data')) {
$exif = exif_read_data($filename);
if($exif && isset($exif['Orientation'])) {
$orientation = $exif['Orientation'];
if($orientation != 1){
$img = imagecreatefromjpeg($filename);
$deg = 0;
switch ($orientation) {
case 3:
$deg = 180;
break;
case 6:
$deg = 270;
break;
case 8:
$deg = 90;
break;
}
if ($deg) {
$img = imagerotate($img, $deg, 0);
}
imagejpeg($img, $filename, 95);
}
}
}
}
from croppie.
@BabysbreathJJ Have u fixed this problem? I am also facing it.
from croppie.
Are you all using the EXIF rotation capabilities in croppie?
from croppie.
Hello.
I am working using croppie on the iOS platform. The EXIF option does not work, as it just returns a blank white canvas.
Also, when turned off (EXIF option), croppie returns mis-cropped images with black spaces in it, and flips the orientation to upside -down or to the left 90 degrees.
Is this ever going to get fixed? I dunno.... would be nice. But I am also looking at other EXIF javascript libraries, as I could 'insert' EXIF data, and my server would automatically re-orient as it reads this EXIF data before finally saving the file.
Anyways... I think this library (croppie) is just abosolutely great. I will move on in my project, and see later about delving back into it after the community has a moment to collect itself.
Thank you very much, we're almost there on this one!
GS
from croppie.
Hey Dustin, thanks for Croppie - it's an awesome library. Super easy to use, both for developers and app users.
I'm also having the same problem as mentioned above - Croppie works excellent without Exif, but once I enable Exif I get a blank white canvas.
Help appreciated!
Thanks
from croppie.
Related Issues (20)
- After cropping the result is 1/4 selected area HOT 1
- Crop image stretched
- Uncaught ReferenceError: opts is not defined
- update? HOT 4
- Croppie Slider not working properly
- Doesn't show results
- Square Preset of 1:1 or any other should be able to resized proportionally when trying to drag the grid control point.
- Is it possible to preload an image into the preview? HOT 1
- Can croppie be updated to support heic files? HOT 2
- action after image crop complete HOT 1
- size: "original" not being honoured in result method call HOT 1
- can we use croppie for multiple image crop in one page?
- It shows depricated APIs after updating flutter HOT 1
- Result size{width:n, height:n} not working HOT 2
- Zooming out indefinetly
- when croppie is bound to an element zoom starts really big, I want the image to be scaled to the boundary element HOT 2
- Croppie js switch between portait and landscape mode HOT 2
- Canvas images are displayed large HOT 2
- rebind the viewport and boundary on button click
- I want to adjust a frame in my profile picture with croppie.
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 croppie.