I am working on a web application that will deal with many image uploads. Its quite likely that the users will be in areas with slow internet connections and I'm hoping to save them upload time by compressing the images before uploading.
I have seen that Aurigma Image Uploader achieves this using a java applet or active x but it's expensive and I'd rather something open source or at least a little cheaper. Ideally I'd like to roll my own if its at all possible.
I'm developing on Ruby on Rails if that makes any difference..
Thanks!
Edit just to clarify: I don't mind if the solution uses activeX or an applet (although js is ideal) - I'm just looking for something a little cheaper than Aurigma at this stage of development.
Also, it may not be feasible for users to shrink the image themselves as in many instances they will uploading directly from an internet cafe or other public internet spot.
Generally, it isn't possible to write an image compressor in JavaScript. Sorry.
You'll need to use a plugin of some sort, and as you mention, other sites use Java.
It appears to be possible to write something to encode a JPEG in ActionScript (i.e. Flash), which will reach a much larger audience than the Java plugin you mention. Here's a link to a blog post talking about PNG & JPEG encoders in ActionScript.
Here's another blog post with a demo of an inlined JPEG encoder in ActionScript.
Only if you use Flash or Silverlight (only way to be cross-platform)
http://www.jeff.wilcox.name/2008/07/fjcore-source/ may be worth a read.
Without using applets or activex (only in windows) you can't execute anything on a client pc.
Probably not, but you can always insist that image uploads over x size will not succeed.
Is this an application where you can force them to insert a smaller image. In that case you could grab the size first to verify it fits standards. This is what facebook used to do with profile pictures. If it was too big they wouldn't take it.
Related
This question already has answers here:
jQuery or javascript to find memory usage of page
(10 answers)
Closed 8 years ago.
I have website which can upload images.
I do CROP from client side before upload then in server side new optimize...
On Mobile devices when no Free RAM fails.
How I can get RAM memory usage from JavaScript to skip CROP if there no memory?
I am looking only JavaScript solution!.
PLEASE I do not have LEAK OF MEMORY!!!
if I open many apps and no much RAM left my strategy not working
I need CODE by JavaScript get the free RAM and if is it bellow some amount I skip the CROP
------------ OK define Fail: --------------
From mobile devices people take photo and upload it...
from JavaScript I perform CROP
1. around 2MB image goes to 300kb
2. I upload only 300kb then from server side 300kb --> 30kb that I save
If there is no RAM this FAILs
I do not want to say "try again"
I would like to Skip the CROP
Thank you very much for comments.
I handle the errors but I would like to avoid client to wait 40-60 sec and then message
If I go with NO CROP IS IT OK but saving near 1.7MB per image bandwidth... GREEDY :-)
window.performance good I will used thanks.
I will do research to have round trip from SERVER SIDE what I can do can I find it for Mobile devices
In Development
Use Chrome's DevTools for pretty comphrensive diagnostics. You can get JavaScript run-time diagnostics, request information, and basically anything you might need.
Client-side Testing
As far as testing how much RAM is available in your code itself, there isn't really a "correct" or "recommended" strategy (source). Obviously the best solution would be to just optimize your code; varying your site's display/interactions based of how many other apps a client is running could be confusing for the user (eg: they expect some tool to be displayed and it never is; they think the page isn't loading properly, so they leave; etc.).
Some highlights from the source above:
"Counting DOM elements or document size might be a good estimation, but it could be quite inaccurate since it wouldn't include event binding, data(), plugins, and other in-memory data structures."
You'll need to monitor both the DOM and the memory you're using for your code for accurate results.
You could try using window.performance (source), but this isn't well-supported across different browsers.
Note: As Danny mentions in a comment below, showing an advisory message when a feature is disabled could clear up some confusion, but then why use the resources on a feature that is so optional that you could just not use it? Just my two cents... :)
I need to develop a website that handles images.
The process will be like this.
The user takes a picture of an item.
The user uploads the picture to the website and set the area that will be cropped and submit.
The website crops the image and combines it with watermark and save it.(Preview function will be a plus)
Is the process doable and practical? Advise me, please.
Thanks.
Sam
A website is hosted on a web server - a full blown operating system. You can use any combination of technologies in the web server. Your backend code can call literally anything, so there are a million ways to achieve this based on the technologies that you're looking to use.
You should read up a little and decide what language you want to use for your image processing, what libraries in that language, and how you're going to access that language (for example, are you going to use CGI, external calls from .NET/Java servlets, or what?
Until you decide the technologies and libraries you're interested in using you can't get much help here.
Everything you mentioned is doable and reasonably practical.
The project is a servlet to which people can upload files via, at present, HTTP POST. This is accompanied by Web page(s) providing a front-end to trigger the upload. We have more or less complete control over the servlet, and the Web pages, but don't want to impose any restrictions on the client beyond being a reasonably modern browser with Javascript. No Java applets etc.
Files may potentially be large, and a possible use case is mobile devices on less reliable networks. Some people on the project are demanding the ability to resume an upload if the network connection goes down. I don't think this is possible with plain HTTP and Javascript in a browser, but I'd love to be proved wrong.
Any suggestions?
Not with Plain Ol' JS. It doesn't have access to the file system, not even a file added to an input type=file control and so it cannot manipulate the data and upload via XHR instead.
You would have to look into a Flash or Java based alternative.
With your current restrictions, no.
(There may be a tiny chance that using the HTML5 file api could be capable of doing this. Maybe someone more knowledgeable can comment because I usually cannot make heads or tails of technical specifications from the w3c : http://www.w3.org/TR/file-upload/ )
Firefox 3.6 implements a FileReader interface, however it doesn't seem to support any form of skipping. Therefor, you would need to read the file and split it where you need it to resume.
This would not be especially useful for large file since you would probably crash the browser anyway because of the memory-allocation it would need.
https://developer.mozilla.org/en/DOM/FileReader
Which is a better approach for this?
ActionScript3 or JavaScript+PHP?
And if anyone came across an open source tool with either I'd really appreciate it.. after a long search, the only good example i found was this http://www.ajax-image-editor.com but I'd rather have a flash alternative.. Also I don't need all the extra functions such as filters.
Thanks.
Flash and Actionscript would certainly have their advantages, but I know no Open Source solution in that field. In Javascript, there is the Prototype based Cropper. There is at least one more good open product out there, but I forgot the name.
This is more of a front-end technology choice. Neither Flash nor JS can store an image on the client side on their own. Both will behave like RPC clients, sending requests to the server to execute.
Whether you choose Flash or JS depends upon your needs (Flash would allow more manipulations than JS) and skills.
There are a lot of flash effects that can be achieved with jQuery.So when do you really need to use Flash instead of javascript?
Quite simply, when you need to do something that jQuery can't do. This includes video/audio, complex animations, cross-browser vector graphics, multi-file uploads, etc. The list goes on.
Of course, you could always write your website in HTML/jQuery and only use Flash for the necessary parts. That way it's a win-win situation, and your application degrades gracefully for those that don't have Flash.
Flash should be considered a 'last resort' in my opinion, and it's one that is shared with many others. Some people use flashblock, so they'll never see it. Users on mobile devices won't see it either.
There are few areas left for flash currently, and HTML5 will likely eliminate one of them.
Only when I have no choice...or asked by my boss
Flash features:
Compiled byte code versus interpreted
2D and 3D geometry libraries
Animation and audio libraries
Total control over Fonts/layout/design
Binary network calls as well as Xml and JSON
I'm not crazy about Flash for brochure or forms sites but it sure is nice for online games.
If your dislike of Flash comes from a dislike of Adobe, check out the Haxe programming language. It can target the Flash runtime.
if you need something which cant be done by JQuery then go for flash. otherwise stick to JQuery.
It is good for times when you want to make screen scraping harder. A major real estate site I worked with used Flash to make it much more difficult for a competitor to scrape agent data.
Sure this could of been done with images but Flash was just easier for us to implement.
Flex, which runs on top of Flash, is a very nice platform for building applications. In my opinion, it's far better than trying to coerce HTML and JavaScript into being a platform for GUIs. Also, if you have a graphics designer, they will have a much easier time designing the look and feel with the WYSIWYG tools available in the Adobe tools.
However, for traditional web sites, I'd stick with HTML/CSS/JavaScript. Don't use Flash if all you need is simple effects.
Flash is a frontend tool that should be considered when there are requirements that make a project much easier to develop. I know that there are alot of Flash haters, and I understand the reasons. However, each developer should use the tools available to them that would allow the job to get done effectively and quickly. PHP, HTML and JS have its limits, just like AS3 does as well, but each has something that can help deliver a project.