I want to load the image with the minimum size of 2KB. I am unable to use any server technology here. Is it possible to know the size of the image using JavaScript or jQuery?
It is possible using html5 stuff (if you can't use server-side).
http://www.html5rocks.com/en/tutorials/file/dndfiles/
or though Flash app since almost everyone have it installed.
You would have load this image via AJAX and then use content-lenght property. Check this out.
Related
I am starting a new project where i need to have image recognition in a browser application that runs on desktop browsers, iOS and Android. The images should be scanned by using either the webcam or the device camere. So i assume using HTML5 with javascript is the way to go. The only problem is that i cannot find a decent library for this. I did find libraries that compare images by pixelarrays, and libs that can do face tracking and stuff, but none that suits my needs at first sight.
Anyone know how i can best approach this problem?
Thank you.
You will first need to find a solution on how to import your local pictures into a canvas element on your website. Either you upload them to the server first, or (if you want to use live pictures from webcams), you could use this jQuery plugin: http://www.xarg.org/project/jquery-webcam-plugin/
It uses some Flash, but as far as I know, there's no other way to get webcam pictures into the browser easily.
From canvas element you can read the pictures into pixel arrays and then use existing libraries (maybe transcode them into javascript) to do whatever you like.
There is another more recent (without JQuery) Library available to stream webcam content into canvas.
http://cbrandolino.github.io/camvas/
In HTML5 you can definitely do it through JavaScript with a bit of browser detection, here are some useful links:
http://www.html5rocks.com/en/tutorials/getusermedia/intro/
This little javascript project used google images to recognize the content of the image:
https://github.com/xc0d3rz/npm-imagerecognition
Probably could be helpful to solve part of your problem.
Could someone please help me with this situation:
I have to retrieve images (stored in BLOB) from an Oracle SQL Database.
This is already done and images are pushed into a temporary attribute in HEX.
These images are later pushed to a Directory Server using LDAP.
The only problem is, that I want to resize each image to a specific size and add a simple border on the fly using Javascript without using the file system of the host, before pushing them to the LDAP Directory Server.
Note: I can't use browser specific methods or objects, since my java runtime is used by a different host rather than a browser.
It's been a week since I am looking for a solution and unfortunately, I haven't found one yet.
Any advice will be greatly appreciated!
Thanks in advance!
Bobby
Mentioning Oracle and LDAP makes me think that your JS runtime is not a browser. But if it is, you can use canvas for both resizing and adding border, you can then get the data back as data URL using canvasEl.toDataURL('image/png'). Read up on how to use canvas https://developer.mozilla.org/en/Canvas_tutorial
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.
Can you do file input/output using Javascript without using ActiveX, submitting a form to a server, or other extensions?
The reason I ask is after hearing all about HTML5 I thought I might take the time to find out what all the hype is about but I can't see any way to create regular applications.
An example of what I thought I might be able to do would be to create a simple text editor in the browser using only HTML5 and Javascript, where I can open and save files from the disk. After that I was thinking to try and create some kind of icon editor using the canvas tag. But without any kind of file IO each example is rather pointless (in my opinion that is). So, is this possible? And if so how would I go about doing it?
Thank you!
Yes. See this Mozilla demo which extracts EXIF data from a local image. The W3C is developing an API.
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.