Can you get the exif data upon image upload using Javascript? - javascript

I have an input file type:
<input type='file' id='upload_files' name='upload_files' file-model='upload_files'/>
I want to be able to extract the exif data if it exists from the uploaded image. Can this be done with javascript/angularjs alone?
I tried using exif_read_data() but it seems that by the time it reaches this point, the exif data has already been lost.

Solution:
This is the solution that has worked for me. I used exif-js JavaScript library to extract the exif data from an uploaded image if it exists.
Further Use:
I needed the exif data to get the original orientation of an image. I used the extraction of the exif data and I wrote the data into a file. I saved this file for later use and also use it to extract the Orientation value from the original state of the image. I use this value to appropriate rotate the final image.

Related

Using images from https://maps.googleapis.com/maps/api/place/

I have successfully fetched a location from the place api and collected photo_reference from there which I am now trying to pass on to https://maps.googleapis.com/maps/api/place/ but when I do I only a failed image in return.
I've also tried manually copying the photo_reference keys from here just to try it out: https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=-33.8670522,151.1957362&radius=500&type=restaurant&keyword=cruise&key=xxx and none of those photo_references seem to work either. I thought my key may be the issue but I have managed to convert one photo_reference and thats when using the one from the documentation that shows a gogle reception disk. What am I doing wrong?
I'm now only putting this url as a src to an which displays the error image but I can't browse to these images either. I tried using fetch and then I get a Base 64 PNG in return but setting that as src to my image didn't work either (seemed to not be formatted correctly)
The image I'm trying to use is https://maps.googleapis.com/maps/api/place/photo?photoreference=Aap_uEDqrqI3PdqjtllOq5nuQTmo6fR6nKnSQsLbk6rvkOpqQNagMT_E2V_KG-q4WJzjok4ZsqQpHn7Y-DUWjHx2M5mZT_IdfTO6xNTjIE7G4rt94yjHw-v8xuLuV7wyzgSnvPBHUB1zFDO70y2gUyAPeo1J8DdtKcc4DelHPEC10Ah_O14n&key=xxx
How should I display a photo from the api?
You forgot to include the required maxheight and maxwidth parameters on your request. For your reference, you can check the documentation on Places Photos: https://developers.google.com/maps/documentation/places/web-service/photos#place_photo_requests
Here is a working request with the maxheight and maxwidth parameters (just put in your own API key): https://maps.googleapis.com/maps/api/place/photo?photoreference=Aap_uEDqrqI3PdqjtllOq5nuQTmo6fR6nKnSQsLbk6rvkOpqQNagMT_E2V_KG-q4WJzjok4ZsqQpHn7Y-DUWjHx2M5mZT_IdfTO6xNTjIE7G4rt94yjHw-v8xuLuV7wyzgSnvPBHUB1zFDO70y2gUyAPeo1J8DdtKcc4DelHPEC10Ah_O14n&maxheight=600&maxwidth=600&key=xxx

Image source path is converting into blop instead of real path in tinyMCE editor

I have an issue with latest tinyMCE editor, whenever I try to select and edit the image, it's source is converting into blob path like this.
blob:http://localhost/87d42e34-9961-412c-914b-dc6a77ab68e0
Did anyone of you face this issue or resolved... ?
Please help
When you edit images using the TinyMCE Image Tools you will get one of these encoded images - that is how the Image Tools work.
What you can then do is configure TinyMCE to upload this image and you can store that image as you see fit for your application.
The basic process is that TinyMCE will create a separate HTTP POST for each image that you modify with the image editor. It will send that image to a URL of your choosing (via HTTP POST) based on the setting of the images_upload_url option in your init.
The image handler at the URL referenced in the images_upload_url (which you have to create) has to do whatever needs to be done to "store" the image in your application. That could mean something like:
Store the item in a folder on your web server
Store the item in a database
Store the item in an asset management system
...regardless of where you choose to store the image your image handler needs to return a single line of JSON telling TinyMCE the new location of the image. As referenced in the TinyMCE documentation this might look like:
{ location : '/uploaded/image/path/image.png' }
TinyMCE will then update the image's src attribute to the value you return. If you use the images_upload_base_path setting in the init that will be prepended to the returned location. The TinyMCE page has more details on all of this:
https://www.tinymce.com/docs/advanced/handle-async-image-uploads/
The net here is that the Image tools will create one of these encoded images whenever you edit an image. TinyMCE knows when an embedded image exists in your content but it can't possibly know what to do with that image in the context of your application so that job (the "image handler") is something you must create.

extract exif from base64 image string (using javascript or jquery), on client side

I have a website that allows for a photo upload via a
<input type="file">
onChange, My javascript takes the uploaded image, converts it to base64, and displays it as the background of an html .
cool.
Problem: photos taken on mobile devices display sideways or upside down ("rotated") when I put them on the html element.
I've been doing research, and found the solution to this is to read the EXIF value from the image file, which holds the answer to which way the image should be oriented when displayed on screen.
I've been trying to extract the exif value of my base64 image for the past 3 days but haven't gotten very far.
I tried using a library, exif.js, but got a slew of unrecognizable characters as my return:
<script>
var isaacImg = "data:image/gif;base64,R0lGODlh...hB0SlBCBMQiB0UjIQA7"
var x = decode64(isaacImg);
console.log(x);
</script>
I also tried the following code from this stackOverflow answer but my browser does not recognize the object EXIF:
<script>
var b64 = "data:image/jpeg;base64,/9j/4AAQSkZJRgABA......";
var bin = atob(b64.split(',')[1]);
var exif = EXIF.readFromBinaryFile(new BinaryFile(bin));
alert(exif.Orientation);
</script>
I found the following library for base64 conversion suitable for my requirement.
http://jsbase64.codeplex.com/. You may want to give this a try as well.
you need to import a javascript library that gives you the EXIF object. In the page include something like this in the head section:
<script src="path/library-min.js"></script>
where path can be a number of things: a CDN url or a path relative to your own server url root path if you serve up the library yourself. library-min.js is NOT the name of the EXIF library just an example name.

upload generated image to server

This example shows a map created with the ammap library. This library creates the map using SVG. I want to use this map in a PDF/XLS report that's generated on the server-side, so the first step (I think) is to convert it into an image format that can be embedded in PDF/XLS documents.
If you click the Export button the SVG is converted to a base64-encoded PNG and added to the DOM. In other words, the following element is added to the DOM (base64 encoding abbreviated)
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAlgAAAGQCAYAAAByNR6YAAAgAElEQVR4nOydd3hU55n26aJJAoHoiN6r6WDAuFFscMXdxhgbG2PADWOK4ySbuok32V3vJrGdsmmbOP6SdbLxRqOu6XPOgCRUZ0aj3jUz0vQz9f7+ONJIozqjM">
However, rather than appending the PNG to the DOM, what I really want to do is upload the image to the server, is this possible?
I think you could send your png image to the server in a post request. With luck you could even get the .pdf result in that request. Check the instructions on how to retrieve the binary data for your image: Get image data in JavaScript? (Just noticed that you already have the base64 data, so you are already half the way towards the solution)

Saving Pixastic Images

I have been playing around with todataurl following some advice but to no avail.
I am using the pixastic processing library and the manipulated image is placed in a div. I want a way to be able to temporarily store these images so that they can be stored on the server for later use on the same page.
Any suggestions?
Here is a Demo Page
Use
document.getElementById("canvas").getContext('2d').canvas.toDataURL()
to get PNG image base64 decoded.
After it you can save image to server or in html5 localStorage.

Categories

Resources