I'm evaluating image upload techniques using Canvas for a mobile web app. The sticking point is reading EXIF data client-side. Other discussions on this site point towards the excellent Blueimp JavaScript Image Load. I particularly want to extract from EXIF:
date & time of photo taken
Geopositioning - latitude & longitude of photo taken
Testing the Blueimp script on Firefox v.33.1 on Windows Vista using a photo taken on an iPhone (with geo data), it successfully extracts all the EXIF data including date, time & geocoords. Running the same test with the same photo on iOS and it only extracts a tiny amount of EXIF data - just the dimensions and orientation (I'm using iPhone 5, iOS 8.1), nothing else. Why is this? Is there a fix or an alternative JavaScript EXIF extraction tool to recommend?
Suggestions very gratefully received as this is doing my head in!! Thanks in advance.
Please note: I don't want to do it server-side with PHP because this requires uploading the full image, which can be slow on mobile bandwidth, hence going for the canvas option to resize images client-side.
After more reading around on this issue, a similar question was asked here a year ago, with no satisfactory responses. According to one commenter, uploaded files on iOS devices only get access to a sanitized version of the file for privacy reasons. This means what useful stuff like time/date and GPS is stripped out of a file before it is made available to the browser.
Which kind of scuppers this idea. :(
Related
I have a server-side command defined to receive images uploaded with TinyMCE (file upload or drag-and-drop). I have the image in my hands as a binary which I then write to my server.
I was testing with this image taken with my iPhone. The original photo was 3024 x 4032. In the editor we can resize, but still the original 4.9 MB image would get saved on the server side. I was thinking there are probably server-side scripts we can add to rescale/resize it. Anybody know of any that can be used when saving images?
The image is a binary, and might be JPEG or might be PNG. It even might be GIF.
For this example, I used Preview on the Mac to resize my picture to 500 pixels wide before uploading, which reduced the size to just 191 KB. It would be great if this could do that using JavaScript once I have the image in hand. Any thoughts? Thanks.
It turns out my (not very standard) server has some built in commands to rescale and optimize image binaries. I added those to the backend upload processor and it works great. It makes editing a lot easier, saves a lot of space on the server, and email notifications containing the images open much quicker. So this issue is good for now.
My answer won't be of any help to a user using an ordinary Apache/PHP server though. But I imagine there are lots of libraries for those.
How would one go about drawing the output of a program running outside the browser onto a canvas? I was thinking along the lines of using a virtual frame buffer, but am unsure of how one would proceed with the process. I figure that there would have to be some intermediate processing or mapping of the pixel data with JavaScript as an intermediary.
Does anyone have any recommendations or insight that they could offer?
Thanks
I know this thread is a bit old...
As an alternative to Guacamole (Linux/Apache/Java), you may have a look to Myrtille, (Windows/IIS/C#). It works for both HTML4 (using divs and xhr) and HTML5 (using canvas and websockets).
HTML5 canvas is not designed to do that. Its designed to read image (or video) data from the web and display it, either as normal http download or as xmlHttpRequest. When you need to get image data generated by an external application into the javascript engine of the web browser, you need to expose that image data as a webservice.
Thanks to MarkE's and Philipp's nudging I found what seems to be the beginnings of a suitable solution.
Although it does't involve a framebuffer directly, I found Guacamole an HTML5 remote desktop gateway, http://guac-dev.org/ it only uses Ajax and HTML5 to render on the desktop of a remote system using vnc or RDP protocols in the browser. Its open source and is a suitable starting point in my view.
Well, after a lot of searching, i realy can't find a solution for my problem. I'll explain what is about.
Im building a series of apps for iPhone, iPad, Android phone, Android Tablet, using HTML5, PhoneGap.
The app is alredy coded and done, using ChildBrowser plugin for PhoneGap. So basically, i upload PDF files of magazine on my server, the app, download it and you read it on your phone or tablet.
ChildBrowser is a good solution, but for something small. My pdf files are about 15mb each, so you need to wait while it download the whole pdf file and then it will come on the screen. It is a pretty rough solution for a magazine.
I tried pdf.js but it cant render graphics of the pdf.
I saw flexpaper zine, but its too expensive.
Anybody have any ideas please?
Thank you!
I don't know much about this, but one of my favorite magazines, Full Circle Magazine, uses Scribd last I knew. I don't know how it works, but it may be worth looking into.
There are Two options either you can cut your single pdf(15mb) files into number of single page pdf and load as as user request(more often load next 2 3 before user completes reading the previous page) or convert each page in pdf to jpg image and load in to web view .bot these technique require tools for either slicing or converting pdf.
Simperium looks like an awesome way to sync data across a variety of platforms and to deal with on/offline access from mobile.
For a project I'm working on some of the data is in the form of generated image and video files. I can't find any information about whether it is possible to sync this kind of data through Simperium (I guess I could base64 encode the images but it seems like a hack).
Or would I need to sync the URLs and then manually download these resources and somehow store them locally?
Simperium has basic support for binary files on the iOS side, currently in testing. This isn't yet available in the JavaScript library, but it will be. The way it works is similar to what you described. Simperium can handle the syncing of both a URL and its associated binary content in cases where that makes sense.
On iOS, binary files are stored to the local file system (though small files can indeed be stored as base64 encoded strings if you prefer).
In JavaScript, if you're working on the client side, the situation is less clear given the storage limits imposed by browsers, but you always have the option of syncing and using standard links depending on what you're trying to do. On the server side, there are of course more options. If you have some uses cases to share, you should get in touch.
I recently started building a bookmarklet that displays the EXIF data of any image on a website. I chose to use Nihilogic's binary.js and exif.js libraries. For images hosted on the same domain as the parent page, the script works wonderfully. But because it uses XHR to read the binary data of images, and because XHR is restricted to same-origin requests, I can't access the binary data of any cross-site-hosted images.
Is there a way to load the binary data of an image locally (or at least without using XHR) that preserves EXIF data?
I've explored a few other directions, but I fear I don't understand them well enough to determine if there's a solution:
JSONP - I'm assuming there's no way to get binary data into one of these things.
canvas tags - these seem to produce very different base64 encodings than what PHP does, and I suspect that the EXIF data no longer exists in the new encoding.
Javascript is allowed to do special operations (like on the canvas) with same-origin images and cors-enabled images because the browser can safely assume that those would be OK to upload to the server in the first place. But then it gets complicated...
I can't access the binary data of any cross-site-hosted images.
Yes, generally it is very important that you can't. More to the point, you can't do what you want with a bookmarklet.
You can't do this with a canvas because the cors rules here are strict (for good reasons!)
In short the reasoning in general is pretty much exactly the same. Browsers are in a unique security position: A random page on the internet can show you things that are private to you, such as the hypothetical image, C:\MyPhotos\privateImage1.jpg, assuming it could guess that file path.
But that webpage is most certainly not allowed to do anything with that file other than show it to you. It can't read the binary information (EXIF information or pixel information). JavaScript is not allowed to know what that image looks like or nearly any data associated with it.
If it was able to figure that out, a random webpage would be able to try a bunch of file paths and maybe come across an image on your hard drive, and then upload the binary data of that image to a server, in effect stealing your private image.
A browser extension would be far more suited to this task than a (JavaScript) bookmarklet because of this.
Purely from the client? I doubt it. How about XHR'ing a local PHP script that runs something like exif_imagetype()? This function works on remote as well as images.