I am using filepicker.io to upload an image from iOS device to Filepicker.
In my code, I am using image tag ">. When I view the image:
1) on a desktop browser (Chrome) it's upside down (rotated 180 degrees)
2) I view the same HTML page from my mobile device (iOS) and it's the right way up.
3) If I just view the filepicker.io link (I not via imag tag) in a browser it's the right way up.
Any ideas?
Indeed some browsers ignore the EXIF orientation info. This mostly affects IOS devices. I've worked around this by transforming images right after they are uploaded:
filepicker.convert(InkBlob,
{width: 800, format: 'jpg', quality: 85, rotate: "exif"}...
OK, it's the "orientation" and I guess some browsers seem to auto-apply/fix this. The short of it is, I need to find out what the orientation is and then apply/rotate the image accordingly.
I have managed to do this manually with JavaScript loadImage.
I am trying to work out how to do it dynamically in this thread Can't get EXIF info using loadImage.parseMetaData I have an idea of what to do, it's just not working... but I'll leave that to be sorted out in that thread.
Related
I let users upload images to fileadmin when they're logged in in the frontend.
So far so good, this works.
Now some images (especially when uploaded form mobile phones) are rotated (if taken in landscape mode, for example).
I tried using Imagick to autorotate those images upon upload, but it seems at least the IPhone doesn't have proper EXIF-data in the image (images taken in HEIC-Format, seem to be converted to jpgs when uploaded and then lose all EXIF-Data). At least the getImageOrientation-method from Imagick returns an invalid orientation.
Now, to overcome this, I've created a function for the users so they can rotate their images themselves.
This works as well. The original image gets rotated as expected.
BUT: I need to update the processed images as well, since they still reflect the unrotated image.
How would I do that without manually deleting the processed-files in the installer?
I mean, I could create a new image and delete the old one, but that seems like some unnecessary labor.
Any ideas?
I have encountered a similar problem to others on SO regarding the orientation of UIImages taken using the iPad camera. Essentially, I am taking a UIImage using the camera on the iPad. When I then display it, it has rotated through 90 degrees.
From reading other questions and answers, I now understand that when the camera takes a photo it stores an EXIF tag which determines the orientation of the photo. This would normally allow all Mac and iOS apps to read this orientation data. However, I am storing my images in the documents directory as NSData (having been converted through UIImagePNGRepresentation and saving the URL in core data. I am assuming the process of doing this is causing me to lose the orientation EXIF tag so when it is retrieved it is displayed incorrectly.
Can anyone think of a way to correct this?
Thoughts, advice and pointers all welcome.
Many thanks
EXIF is something that is in image files, not UIImage. When you take a photo with the camera, UIImagePicker never saves it in a file, therefore, there is no EXIF yet.
In your case though, the problem isn't the orientation of the iPad. I believe UIImagePNGRepresentation always saves it rotated 90 degrees (regardless of rotation). You just need to rotate it before generating a PNG. I don't know why it does this, but you just need to work around it.
EXIF metadata is not accurate in orientation it is accurate in GPS data, it will detect only 90 & 180 & 270 with some Error cases try this
iOS UIImagePickerController result image orientation after upload
Good Luck
Take a look at this library: http://vocaro.com/trevor/blog/2009/10/12/resize-a-uiimage-the-right-way/ He has the code to take an image and remove the orientation info by transforming it.
We're using the facebook graph API http://developers.facebook.com/docs/reference/api/post/ and adding the picture parameter. Our picture is a 30x30 pixel image, which is exactly the size we want for the facebook web version. However, the image will be pixelated when using the FB mobile app on an iPhone4 (retina display).
Is there any way to serve a 60x60 high resolution image, but render it always at 30x30 for facebook wall posts?
Well.. as of this moment, here is what I have found out, and offer a 'solution' that has worked for me based on the time i've had to test & play with this concept. For all the readers out there, who need a quick answer to the question, i don't have the exact solution to the question, but…. Essentially, your 30x30 image is being scaled to 90x90. The 60x60 image is being scaled to 90x90. And I can not find a way to go around this.
Below is what I have tried. Feel free to add input.
Take your feed image, and stroke a 2-5px black line around the frame of the image.
Load up your app, initiate a wall feed on the device. With the image present, take a screenshot. Mail yourself the image. Open it up in Photoshop (or photo editing program). Use a Marquee tool to outline the image. Cut it out of the screenshot and paste it as a new image. What size is it? 90x90, right? (and obviously 180x180 if image is retina)
Create a 90x 90 image. Copy your original 30x30 image and paste it anywhere you want within the new 90x90 images' frame. Upload it to the URL parameter's location. Re-run your app. By re-running it, i mean you have to shut it down completely, it appears as though the SDK is cacheing the image upon first launch of the feed and you can clear that cache by closing the app completely, and rerunning it. When you do, you will see significant improvements with the look of the image. It may not be a retina image, but it at least won't be 'fuzzy ugly'. At this point, it boils down to how nice of illustrative lines that where done in the design process to remove the aliasing effect produced from the conversion to a raster graphic. As well, i'm not sure if a variation of resampling method will produce even better results.
Some things i've tried:
I've also saved it as a png file with no transparency : 144ppi at 90 x 90 size. In other words, save your 90x90 image with a higher resolution (pixels per inch). Remember to not constrain proportions as you image resize. And note that If you are using adobe products, i.e. photoshop ) - don't save for web, just use 'save as…', as this will retain the ppi you specified. Although, i don't believe i see much of a difference in the quality which this is displayed going this route, and best to try to keep the file size down as this will increase the overall image size by about 500% or more.
I've tried variations of hosting the image twice the size (180x180) within the same hosted folder and naming it image#2x.png & image-large.png <--(just for the heck of it). This is not really solving the problem either.
Some other things I have not tried:
Monitoring your web server traffic, and any "not found" errors to a resource to see if FB is trying to access an a potential alternate resource when grabbing your image for display, the wall feed box that comes up is a webview. Meaning web graphics. (It's FB's web page…meaning their rules, and i doubt the pages' source is available to dabble with within the SDK.. so!…
Look at the HTML of the feed itself with safari browser:
The inspection of the HTML within the final resulting image that is posted on my FB wall I can see this….
<img class="img" src="http://platform.ak.fbcdn.net/www/app_full_proxy.php?app=153675474666495&v=1&size=z&cksum=773bba91f6146b2463eed0a0bb77dc42&src=http%3A%2F%2Fwww.thumbwizards.com%2Fspeakinapps%2Fgraphics%2Fboxed%2Faussie.png" alt="">
I am wondering:
Within HTML5 isn't there a mechanism to provide a toolkit type of javascript to display retina graphics from a web page?
Would it be possible to have that code run when grabbing the url to the image (in meaning, the url of the image would be acting as a pointer to the code.? I haven't tried playing with this, since my logic tells me that per the url above that FB is essentially taking control over the image at this point. I have noticed (and not waited long enough to see) that the image is apparently cached and posting to the wall with a new image, sometimes results in the older image still being used. (and yes, i've cleared my browser cache)… perhaps simply cached in another location..
If there is another parameter for the image type, that is not published, I have not stumbled across any yet.
Can anyone figure out if through source of:
[http://platform.ak.fbcdn.net/www/app_full_proxy.php] if this php file is part of an available image processor out there we can access to view what could be done?
Can anyone mention an app that uses a retina graphic in their feed post?
Just thoughts really, I've decided to not really give a crop, and if
you've made it this far. Thanks for tuning in. ..So, Sulf, your 30x30 is being scaled to 90x90. making it UGLY!.
Good luck.. If you figure anything else out, let me know!
Mark
apple specify that if you want to add the retina effect for your ios app then the images you are using in this format -i.e
sampleImag.png- 57*57(size) , 163 (DPI)
sampleImag#2x.png - 114*114(size),326 (DPI) when you use these specific graphic images you will get your app is showing retina effect in iphone 4 and above generation.
Just point your code to a larger scaled image and Facebook will take care of the rest.
When I use the standard [view.layer renderInContext:UIGraphicsGetCurrentContext()]; method for turning views into images on the iPhone camera modal view, all I get is the controls with black where the camera preview was.
Anyone have a solution for this? Speed is not an issue.
Not possible from a documented api, but possible. Find the "PLCameraView" view in the camera's subviews, then call
CGImageRef img = (CGImageRef)[foundCameraView imageRef];
This will return a reference to the image that camera holds.
You can do this with the new AVFoundation stuff in iOS 4.0.
You should be able to call UIGetScreenImage() (returns a UIImage) to get a current capture of the whole screen, including the preview. That's how all the barcode apps worked before. But supposedly Apple is disallowing that now and only allow the AVFoundation technique - which only works under 4.0.
The whole reason there's even an issue is because UIGetScreenImage() is not part of the documented API, but Apple made a specific exception for using it. It's not like they are pulling current apps, but they are not allowing new submissions (or updates) that use the older technique.
There is some lobbying on behalf on a number of people to convince Apple to let app developers use the old technique for iOS 3.x only, so send an email to developer relations if you want to use it.
This isn't possible unfortunately. For performance the iPhone uses some form of direct rendering to draw the camera preview directly onto the screen instead of as part of a UIView surface. As such when you "capture" the camera view you will only get the UIView elements, not the preview image.
(FWIW this is similar to the reasons why its difficult to screengrab some movie software on Windows/Mac)
You could try AVCaptureVideoPreviewLayer
I want my website to change its layout according to the device positon. The site has 2 layout types: vertical(height > width) ang horizontal(width > height).
do you see any solution?
upd: I don't see any complexity in changing the site layout. I want to know is there any event to handle.
p.s. will iphone's browser change its orientation if i rotate the device 90 degree?
Dave, tnx for emendation.
There is a javascript event called onorientationchange sent when the orientation changes and also there is a property called orientation on the window object that tells what the current orientation is.
See the documentation for more info and sample.