Client side resize BEFORE upload? sample code inside...
Hi everyone. I wonder if its posible to resize a huge image i.e. a 4MB jpg to a small 400x400 image BEFORE uploading to save bandwith. so the image will be about 30k instead 4 MB.
Currently I am uploading the huge file and resizing it after it gets to my server. the thing is if I have 100 user uploading a 4MB file at the same time the website start running sloooooowwwww. so I figured that if I could just find a way to resize the original image BEFORE uploading I could handle 100 users uploading a 30k file....
after a lot of research I found out several comercial products such Aurigma or Thinfile. that can do just that....
So why am I here? I dont really like te ActiveX(Aurigma) or the Java applet (ThinFile) solution since many users have problems whit it. but hey... everybody has flash right?.
I just found a pice of code claiming that it can resize an image client side using Flash 8. I wonder what you guys think about the following code:
Assuming there is a MovieClip on stage called imageMC, holding an image (100x100 pixels):
/***************CODE ***********************/
var myMatrix = new flash.geom.Matrix();
myMatrix.scale(.5, .5);
var myBitmapData = new flash.display.BitmapData(50, 50, true, 0x00FFFFFF);
myBitmapData.draw(imageMC, myMatrix);
var bitmapPixels:Array = new Array();
for(var i:Number = 0; i <= myBitmapData.width; i ++)
{
for(var j:Number = 0; j <= myBitmapData.height; j ++)
{
bitmapPixels.push(myBitmapData.getPixel32(i, j));
}
}
Now you have an array containing each pixels ARGB value of the 50% downscaled image... you could send it to a server and use the data to build an image from it...
note: depending on the image size the nested for loops could cause the flashplayer to run veeeeeery slowly...
/***************CODE ***********************/
the original post is here: http://forums.swishzone.com/index.php?showtopic=30097
please can anyone take a look at it... It will be awesome if swfupload could resize the images before uploading them.
thanks for your time.
I will be interesed too.
I will be interesed too. Currently I was looking for something in JAVA but application in java are heavier that the flash one...
Features
This kind of feature is kind of outside the intended feature set for SWFUpload.
However, I appreciate the need. If someone is willing to contribute code that does this then we'd be happy to include this feature.
I think the difficult part here is getting the image from from the client's computer in to Flash (so we can then use the code sample above to resize it).
Then we have to send the resized image data to the server and probably won't be able to use the FileReference libraries to do so.
loading jpg/png/gif without sendint to the server...
hi i found this.
Have you looked at the AS3 docs? You can load jpeg/png/gif from a bytearray without sending it to the server...
Look here:
http://livedocs.macromedia.com/labs/1/flex/langref/flash/display/Loader.html#loadBytes()
at the following post: http://www.kaourantin.net/2005/10/png-encoder-in-as3.html
sorry I dont know how to program in flash(yet) so all I can do is to try to point you in the right direction and hope you will have time to integrate it.
thanks.
Missing one piece
I have not researched this (it's kind of outside the scope and time constraints for SWFUpload).
The missing piece is getting the byte array from the image on the clients computer in the first place. The FileReference object (which SWFUpload uses to do the real work (select files, make the upload, trigger progress and other events)) doesn't give us any access to the file data other than to upload it to a URL.
If someone can figure out that one step it opens the door to all sorts of possibilities. Honestly I can't understand why we can't have local access to the file if the user has browsed and selected the file. The security sandbox is a bit overzealous.
Get The array bytes of the client computer...
I have found a way to load an image into an tag using java script fromn the local filesystem. after that is done. flash will be able to load such image in a MovieClip. the use the code from the first message to retrieve the bytearray. the code below loads an image from the local filesystem into an tag:
function preview() {
field = document.getElementById( 'upload' ).value;
image = document.getElementById( 'previewIMG' );
path = 'file://'+ field;
path = path.replace(/\\/, '/'); // Fix Windows paths
image.src = path;
image.style.display = 'block';
image.style.width = "200px";
image.style.height = "150px";
}
the original post is at: http://forums.invisionpower.com/lofiversion/index.php/t226158.html
I guess all that needs to be done is to pass the image information to flash from javascript to load the image... I also found some code for doing such thing.
thanks
I could only do the local
I could only do the local file image preview in IE6 and Safari 3.0.4 for Windows.
It would not work in FF2, FF3, or Opera 9.24
Script fixed and tested in Ie6,Ie7,Firefox2,Safari....
Hi I made a quick hack to the script and got it working in the following browsers under winXP SP2 since the URL is escaped I guess it should work in other OS as well. following is the complete HTML test.
html>
head>
script>
function preview(field) {
//field = document.getElementById( 'upload' ).value;
alert("Before:"+field);
image = document.getElementById( 'previewIMG' );
path = 'file:///'+ field;
path = escape(path);
path = path.replace(/%5C/g, "/");
path = path.replace(/%3A/g, ":");
alert("after="+path);
image.src = path;
image.style.display = 'block';
image.style.width = "200px";
image.style.height = "150px";
}
/script>
/head>
body>
input type="file" name="upload" id="upload" onchange="preview(this.value)"; />
img id="previewIMG" style="display:none;" />
/body>
/html>
Hope it helps. and again thanks a lot for your time men...
Local file
This only works for me if I load the HTML file locally (file:///C:/inetpub/wwwroot/other/test.html)
But if I load it via a webserver (http://localhost/other/test.html) it does not work.
Are you loading it from a web server? Is my configuration weird?
Online test
Hi I uploaded the file to the following adress.
http://www.sx-networks.com/test.html
let me now if it works for you.
thanks
Test site
Results:
IE 6 & Safari for Windows display the image (and have the correct path in the alert boxes)
IE7 does not display the image and has the correct path
FF2 does not display the image and has the correct path
Opera 9.24 does not display the image and has the file name only
FF3b3 does not display the image and has the file name only
preview not showing...
considering that most of the browsers have the right path. and some not show the image. I just have one last question...
does flash display the image? if you pass the path to a flash movie does it display the image?. if it does it doesnt really matter that the img tag doesnt right?
thanks
Tested with flash
This only works if the flash file is local. Running an swf on the net and trying to have it load a local file into a movie clip is not possible (i just tried it).
-Chris
Javascript accessing local files
the thing crackerjack00 wrote will not work in FF if the policy (checkloaduri) hasn't been changed.
The thing has been changed a year ago, but the user still has to change settings manually (about:config).
check:
http://kb.mozillazine.org/Links_to_local_pages_don%27t_work
https://bugzilla.mozilla.org/show_bug.cgi?id=307382
Cheers
Interested too
Hi,
i would really appreciate this feature too. Maybe i can give some small donation for it.
No amount of money....
As much as I'd like to take your money
The issue lies in the browser and the Flash Player and there isn't anything we can do in SWFUpload to circumvent the security that is in place to prevent this kind of local file access.
You can do it with Silverlight...
So I know this is a Flash forum for SWFupload, so it may not be of the greatest utility to you guys, but there is a way to do this using Silverlight because you can grab the filestream before upload. We took this ability and created a JPEG codec on top of it, which is just out there for anybody to download the code and use freely. It could be integrated with SWFupload but you'd need both Silverlight and Flash. :-/ Anyway just google "FJCore" to read about and download the Silverlight codec if interested. Hope this helps somebody.
Considered Silverlight
A Silverlight version of SWFUpload had been considered. But our research found that Silver encodes uploads in Base64 which then have to be decoded on the server side.
So that combined with upfront difficulties with getting the Silverlight plugin installed and working for any Silverlight content kind of killed our interest.
However, with the issues facing us in Flash Player 10 we may take another look at Silverlight when version 2 is released.
You can use binary POST, too
You actually don't need to convert to Base64 for uploads in Silverlight. I know some of the examples show this, but I think that's because they're integrating with XML web services. If you go a little lower-level, you can literally post a raw stream that doesn't suffer the encode/decode inefficency... so you definitely might want to think about it as Silverlight 2 nears release.
Flash Player 10
It seems Flash Player 10 provides the groundwork for this to be possible:
http://www.adobe.com/products/flashplayer/features/
"File upload and download APIs Enhanced
Bring users into the experience by letting them load and save files from your web application. New file reference runtime access allows local processing of data without roundtripping to the server."
Now, who will be the first to build a client-side image uploader with cropping, resizing, rotation & repositioning built in...?
Flash 10?
Hi -
It is now possible to get the files from the client computer and resize, but now it seems problematic to do a binary post from the bytearray data in flash. Has anyone accomplished this?
r