Extracting jpeg EXIF information using jQuery - javascript

I'm trying to extract EXIF information from images using jQuery.
I've tried using a script I found here but I can't get it to read exif data from externally hosted image files. I've posted a simple example page here. The code is tiny so you can just view-source to see what I tried.
Does anyone know either what I'm doing wrong or if there there is another way to do it?
-Matt

The plugin works off requesting the image again via a binary XmlHttpRequest, something you just can't do on a remote domain due to the same-origin policy...the browser does a pretty good job of (by default) separating which domains interact with others, this is one of those cases (for security reasons).
Sorry the answer sucks, but I don't think you're not going to be able to do this on a remote image, on a domain you don't control.

You'll either have to proxy the images on the same hostname or get the external host to send appropriate access control headers to allow you to request data on their site through JavaScript.

I always wondered how people seem to think anything could be done with javascript.
Given a remote image, isn't it obvious you could(should) download the image on the server and do the special processing there?
Also, what makes you think jQuery can do things javascript doesn't?
What you are looking for is, at it's best, something that needs to be supported in plain javascript.
Really, parsing a remote binary file locally? Sure it's a nice hack, but why not settle for the real/pro solution, make the server parse the image?
Rant aside, the JS lib cannot work on remote files, and this can't be ever done with plain JS.
You should be downloading the file on your server and parsing it from there.

Related

Is there any way to edit a local file through a web page without running server software?

I've a web working on a web page that's basically just a big table of links. I use javascript to read from a text file, parse it, and create a table based on that.
I'd like to be able to have a button on the page to add new a row of links and add them to the text file (or another file type if it's better).
I know you can accomplish this with php, node.js, and others, but all the methods I've found require server software to be running. Is there any way around this? For example, is there a way to use javascript to call a python script, or any other way?
The page is just for personal use, so I'd like to avoid running server software just to use it if possible. I know you can set it to download a text file, and you can save it in the same location, but I'd also like to avoid that.
From the research I've done, it doesn't seem possible, but I just thought I'd ask before I give up. Thanks in advance.
You can only read from files locally in browser with javascript.
This would be a huge security vulnerability if scripts in browsers could write files to your machine.

Writing data to a local file using HTML5 and Javascript in Chrome

I have created an interactive quiz using html and javascript which will be run on a touchscreen at an event and I need to write the results to a local csv file (so no internet connection). It needs to write to an already existing file, so it cannot be done where the data is stored locally and a download link is generated through the browser.
How would I go about doing this? All methods I have found are either unreliable or no longer supported. The browser I am using is Chrome, so it does not need to be cross-browser compatible.
Can anybody help or point me in the right direction please?
Install a web server.
Point the browser at http://localhost.
Send the data to the server using Ajax or a form submission.
Process the data (including storing it in a file) using the server side language of your choice.
When javascript is used only in the client-side cannot write data as you want.
Follow the #Quentin recommendation about install some web server, as apache using php for instance(It is pretty straight forward!). I also recommend you to create restFull methods to do it with jquery calls from the client side, it is easy to find many examples in the internet and quicky...
If you want something more easy you could work with html post using forms in php, the most easy way to do it.

Converting docx/odt to PDF using JavaScript

I have a node web app that needs to convert a docx file into pdf (using client side resources only and no plugins). I've found a possible solution by converting my docx into HTML using docxjs and then HTML to PDF using jspdf (docx->HTML->PDF).
This solution could make it but I encountered several issues especially with rendering. I know that docxjs doesn't keep the same rendering in HTML as the docx file so it is a problem...
So my question is do you know any free module/solution that could directly do the job without going through HTML (I'm open to odt as a source as well)? If not, what would you advise me to do?
Thanks
As you already know there is no ready-to-use and open libs for this.. You just can't get good results with available variants. My suggesition is:
Use third party API. Like https://market.mashape.com/convertapi/word2pdf-1#!documentation
Create your own service for this purpose. If you have such ability, I suggest to create a small server on node.js (I bet you know how to do this). You can use Libreoffice as a good converter with good render quality like this:
libreoffice -headless -invisible -convert-to pdf {$file_name} -outdir /www-disk/
Don't forget that this is usually takes a lot of time, do not block the request-answer flow: use separate process for each convert operation.
And the last thing. Libreoffice is not very lightweight but it has good quality. You can also find notable unoconv tool.
As of January 2019, there is docx-wasm, which works in node and performs the conversion locally where node is installed. Proprietary but freemium.
It appears that even after three years ncohen had not found an answer. It was also unclear if it had to be a free (as in dollars) solution.
The original requirements were:
using client side resources only and no plugins
Do you mean you don't want server side conversion? Right, I would like my app to be totally autonomous.
Since all the other answers/comments only offered server side component solutions, which the author clearly stated was not what they wanted, here is a proposed answer.
The company I work for has had this solution for a few years now, that can convert DOCX (not odt yet) files to PDF completely in the browser, with no server side component required. This currently uses either asm.js/PNaCl/WASM depending on the exact browser being used.
https://www.pdftron.com/samples/web/samples/viewing/viewing/
Open an office file using the demo above, and you will see no server communication. Everything is done client side. This demo works on mobile browsers also.

Uploading a file to a perl cgi script from Javascript/jquery

I want to send a file to a server using Javascript on the client end and a perl cgi script on the server. And well I don't know where to start.
This is what I understand that I need to do; open the file read it, pass it to the server as the request body, pull the file out of the request body at the server end.
So any one know a good way to do this? also if I have got any of the basics wrong please let me know.
I'd recommend using jquery client-side and CGI.pm server-side. The following resources will provide details:
Tutorial on how to exploit the File API of modern browsers (with or without drag-and-drop metaphor).
To see whether or not your targeted user agents support this technique, look here and here.
JQuery method to issue a POST request
the data attribute will be reader.result in your case (adopting the variable names from the code examples in the linked tutorial).
just keep in mind to call reader.readAsText to make the file contents available to javascript.
processing uploaded files with the perl module CGI.pm as part of a cgi script.
drop a comment if you need more support to get your job done. the explanations and the sample code in the cited docs are actually pretty good.
Also have a look at the answer to the question Quentin ref'ed if you haven't yet done so. regards

Include a text or XML file via the script tag?

For a little context I'm working on a site for a client and it has to run completely offline. It's just a set of html/css/js files that you run locally. The computers it will be used on are office computers and quite locked down so I can't even use java. Luckily the project isn't overly complicated and I've accomplished most of my goals with this limited platform. The issue I'm having is I want to create some easy to change files to load the data from. Right now I have all the data loading through script tags that point to js files that can be manually edited, however I've tried to make the javascript as simple and straight forward as I can but it's still not looking very friendly to someone who hasn't programmed before.
What I would like to do is include an xml file or text file in the HTML using a script tag or something similar and then use JS to read the contents but every time I try this it doesn't actually load the file. Here's a few things I've tried:
<script type="text/xml" src="myxml.xml"></script>
<script type="text/plain" src="myxml.xml"></script>
I've tried using XMLHttpRequest but most of these attempts end in the same result.. can't do a cross-site request. Even though I'm using a url "myxml.xml" and they're in the same folder, chrome is still convinced this is a XSS attempt. So I'm starting to run out of ideas. Can anyone think of any clever way to achieve this?
IF you're goal is to just run your web-app, even offline and you do not care about cross-browser compatibility, you can consider to convert you're application to Packaged App.
It will work only in google-chrome browser but setting the right permissions, you should not have problem with cross-site requests. At this point, you could download the xml content through a noraml XMLHttpRequest.

Categories