what I want to do is to save the image metadata, along with image data, after saving the image using canvas.toDataUrl('image/jpeg') so that next time when I load the image, I should have access to that metadata.
consider the image bellow, here I am drawing the objects in canvas, on mouse over it a tooltip is shown with some data. I am trying to figure out a way through which the metadata can be saved along with the image, when the image is loaded again tooltip should work same as earlier.
while searching for the solution I found that EXIF is used to save metadata to image, but found no direct solution for it most of the solution are using exiftool or any other third party tools/library.
to save the metadata to the image, found not options from front-end, had to do it from back-end (I used node.js). For that I had to make use of the node-exiftool, required installation of exiftool.
bellow are steps for adding the metadata to image:
upload the image and send the metadata to server.
using node-exiftool's .writeMetadata() method write the metadata to the image.
this is done for writing part.
similarly for reading we can make use of the node-exiftool's .readMetadata() method.
Related
I'm setting up a typical profile picture upload and crop feature for a site. I'm looking at how others have set it up and I see that many are managing to have one input type="file" and it not only allows for selecting a file but also calls the PHP or JS to display the image.
I'm completely stuck on how to make it do something after the image has been chosen.
Does any one have a link or suggestion on how to perform this?
One way you could achieve this is to convert the file into a blob, then present it using an HTML5 canvas. Example: http://www.html5rocks.com/en/tutorials/file/dndfiles/
Another option is to issue an AJAX request after the file input has been changed. Do whatever server processing you need to (crop, save, etc.) then return the AJAX call a path to the file. Then just append a new <img src='filepath.jpg' /> to the DOM.
I would upload the image using AJAX, having a API receiving the image. When image has been saved the API-method returns the path of the image.
You can then display the image using the path you recieved from your API-method.
The idea: at the moment I have a script which watch for new images uploaded (from smartphone or tab) to a specific folder. The script moves image to some subfolder depending on image's name and append a row with corresponding data to specific spreadsheet.
Is it possible to fetch geo information from uploaded to Google Drive images (using smartphone) to put them to the spreadsheet? Searched over the API, but look there is no native function for that. Any 3rd-party solutions?
It is possible to accomplish your task (to get geo-data of uploaded images) using GAS. There is no GAS service performing it and I am almost sure now there is no a 3rd-party solution for your task. A brief scheme for the task is the following
to traverse all files in the image folder.
to open every file by using the DocsList.getFileById method
to check if the file data has required MIME-type. I assume, that JPEG files are most wanted to you. They have the image/jpeg MIME-type. The getContentType method of the BLOB class returns the data type.
for filtered files, to get the data by using the BLOB.getBytes method, find in the data the EXIF-matadata (see bellow), parse it and get the geotags. The geo-info stored as metada inside of image file and usually has EXIF format. There is a number of Javascript libraries which are able to read EXIF of JPEG files, for instance, this one. You can either write your own code which will perform this step or modify the exist library (if the library license permits it). The exist library modification should not be a problem.
to publish the retrieved geo-information to a spreadsheet.
I'm using Nihilogic's library Canvas2Image to convert canvas drawings to PNG, and to give the users of my application the possibility to download that image.
What I need is to be able to give the downloadable file a name and the png extension (e.g. "goalboard.png") and not have it download just as an octet stream with no recognizable extension and the name "download", because the average Joe won't know what to do with such a file. And I need to do this on the client-side, because sending that byte stream to the server, depending on the quantity of data in it, can take up to 20 seconds (it's a big canvas!). Not to mention retrieving the image afterward...
So, how do I do this?
One of these should solve your problem (with canvas you can extract the image in base64 format):
Using HTML5/Javascript to generate and save a file
Reading a local file, encoding to base64, I would like to give the user an option to save the result to file
I had a big RaphaelJs canvas too and needed to allow the user to run a script that would save lots of canvas as png images.
I tried to transform my raphael into an svn, then my svg to a png and then using wget but that of course didn't work because my canvas where generated by javascript and wget can't deal with that. In the end I realised that I could just have my webapp to build a page with just the svg canvas and use phantomjs ( a headless browser) to save it as a png. It works briliantly.
It is as simple as that.
1. Make your webapp to build a page with just the svg canvas.
2. Create a svgToPgn.js file with the following code :
var page = require('webpage').create();
page.open('URL_TO_YOUR_HTML_PAGE', function() {
page.render('PATH_TO_PNG/example.png');
phantom.exit();
});
3. Download Phantom (http://phantomjs.org), unzip it and in the bin directory you will find the phantomjs executable. Run :
./phantomjs svgToPgn.js
Your png file will be saved in : PATH_TO_PNG/example.png
And I need to do this on the client-side
Well that requirement kind of kills your chances. Sorry.
You can't do what you want to do, the best you've got is displaying the image and telling the user to right-click save-as.
I have HTML5 canvas where the user has created an image. This is for an image drawing program. I now need to grab the canvas and post it to my server. I also need to post a set of key/value pairs along with the image. Could someone help me with how this is supposed to be done?
See Capture HTML Canvas as gif/jpg/png/pdf? for how to use toDataURL to turn your canvas into an image (encoded as a data URL) .
Consult the MDN Ajax tutorial to learn how to send data to your server asynchronously.
i need to create a component using html5 canvas that given an image the user can paint on it and directly (via a kind of save button) upload it's customized version on the server.
Can i use html canvas for it ?
Any suggestion ?
thx in advance
You can get the image as data-url like this:
var dataUrl = document.getElementById('your-canvas').toDataURL();
You could then send this (very long string) to the server and save it to a file after decoding it (it is encoded in base64).
EDIT: Remember to submit this via POST, as suggested in the comments. GET has some length-limits in various browsers, so its likely to exceed those limits with such a huge amout of data.
Note that this is currently dead-on-arrival for Android (up to and including 2.3). Please star this issue - http://code.google.com/p/android/issues/detail?id=7901