Pure Javascript image handling library (in binary form, not through DOM) - javascript

Since File API will enable access to the content of local files it is now possible to do image resize before upload (a fairly common task) without any additional technology like Flash or Silverlight. Except that I can't find any Javascript library that would be able to handle images in binary form. Is there any? Maybe there is some in Flashe's ECMA script that could be adapted, but I simply can't find anything.

Although I haven't find such libs, I have found a way how to accomplish the described task:
Read image as Data URL
Load an image into a canvas tag and resize it
Encode canvas image data into some image format, for example JPG. Or use Canvas.toDataUrl() and then (optionaly) some base64 decoder.
Client side image resizing and upload with pure javascript. That's cool, isn't it?

Even if you do find something that understands images in pure javascript, you would still need the DOM to render it, making it incredibly slow.

Don't know if this is what you want, but there are some scripts on Userscripts.org that handle images: http://userscripts.org/scripts/show/38736

One problem with calavera.info's answer (sorry I cannot seem to comment directly on that answer) is that the call to either CanvasRenderingContext2D.getImageData or Canvas.toDataURL mentioned in the third bullet will fail. They each throw a SECURITY_ERR: DOM Exception 18 as the image is not from the same origin or domain as the document that owns the canvas element. That seems inevitable since the image comes from the local file system (via an input type="file" tag), but the page comes from your web server.

Related

Retrieving size (in bytes) of image file in pure Javascript

Server-side dev here who's a JS newbie. This question is about retrieving the size of an image selected via the browse input element (in a form), via pure JS.
Currently, the easiest way I know of to get the size (in bytes) in such a case is e.target.files[0].size.
My question is: is this a reliable way to retrieve file size? Or can it be easily spoofed à la file extensions?
I need to impose a ceiling on image sizes allowed to be uploaded. I'm doing that on server-side too, and am adding it to the client for extra security (and to tinker around in JS to learn the ropes).
If this is an unreliable way to retrieve image size, I'd love to see an illustrative example of the alternative. I'm expecting PNGs, JPEGs and GIFs to be uploaded.
Note: Please stick to pure JS for the scope of this question. JQuery is on my radar too, but only after I've absorbed vanilla JS fundamentals.
Yes, e.target.files[0].size is the recommended approach: https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications

node.js create / modify Exif inside the JPEG

Is there a native Javascript module that allows creating / modifying EXIF and IPTC sections inside the JPEG file ?
Note: I already have the Exif data of the image that I am receiving from iPhone along with the image. Since he image does not include all the metadata in itself, I want to combine it and save it on my server.
I came across a one module in my search but that seems abandoned and it never implemented writing of EXIF.
https://github.com/logicalparadox/exifdata
Does anyone know of a pure Javascript module that I can use ?
I did find a C library "libexif" that can do the job. I have not tested it yet. I'm still trying to stay with Javascript.
Write exif data to jpg using libexif
Thanks in advance.
PiexifJS did the job for me. Runs on the browser and on node. No external dependencies.

Is possible using Plupload to resize the file for more sizes?

I need to upload certain file sizes using plupload. For example, small, medium and big picture .
Is possible do that with only javascript?
You can insert a function to resize image when it is uploaded.
if (!$chunks || $chunk == $chunks - 1) {
// Strip the temp .part suffix off
rename("{$filePath}.part", $filePath);
resize_image($filePath);
}
No. JavaScript is scripting language only.
It has not libraries to help manipulate things like images, copy files, send emails, etc .. We can invoke server side utilities or injected proxies but it was invented specifically for DOM manipulation
In the question OP was specifically looking at using JavaScript to manipulate the image and use plupload to upload it. This in impossible because JS on its own cannot do that.
The default plugins for plupload rely on either silverlight, flash or gears and respectively those platform can manipulate images locally and then call upload with the resized file- which will upload to the server.
Possibly OP at the time I wanted to avoid flash, silverlight etc to keep cross browser compatibility and for use on old browsers.
So a good solution is to uplaod the file to the server and use .NET/PHP tools to manipulate the images the way it was needed. While retaining the original image. It works well and you can restrict image sizes to 5mb; which can cause some bas user experience but that is a good trade off.

Is there a way to load a file using jquery (only javascript maybe?) without using ajax?

What I want to know is; Is there a way to load images dynamically (with the only need of putting the img... code) to load a file (the file is in the same server) into a var to parsing it.
The key part of your question is "and parsing it". You've said in a comment you want to load a .gpl color palette and do things with it in a variable. That's exactly what ajax is for. It's simple, it's very widely-supported, works well cross-browser, and since you're loading the palette from your own site, there's no Same Origin Policy issue. What's your reason for disallowing ajax?
But with that limitation, you're really going to have a hard time. On many browsers, you can load an image into a canvas and access its pixels therein, without using Ajax, but you can't currently do that on IE, without using excanvas.js or similar.
Use hidden iframe. Then you can manipulate it with Javascript.

Extracting jpeg EXIF information using jQuery

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.

Categories