Is there any GWT library to be used in client side that does the same thing as Scalr (scale and reduze image file sizes)?

257 views
Skip to first unread message

Julio Heitor Nobrega

unread,
Jan 14, 2016, 8:25:29 AM1/14/16
to GWT Users
Hi guys,

i am trying to upload images with 2mb size but i don't want to send the whole original image to the server.

What i would like to do is reduce the image dimensions from, for example, 1000x1000 to 50x50 and reduce the file size
from 2mb to ~25kb as well and at the end send the ~25kb image to the server.

I know there is the Scalr framework that does that in java, but its no compatible with GWT clients.

Is there any client side GWT library that does the same thing as Scalr?

Best Regards!


Frank

unread,
Jan 14, 2016, 9:27:55 AM1/14/16
to GWT Users
I would be very surprised if this is possible at all.
I don't think this is possible in javascript.

Op donderdag 14 januari 2016 14:25:29 UTC+1 schreef Julio Heitor Nobrega:

Alain Ekambi

unread,
Jan 14, 2016, 9:30:11 AM1/14/16
to google-we...@googlegroups.com
We were doing stuff like that using Flash and our GWT API for Flash.

--
You received this message because you are subscribed to the Google Groups "GWT Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-web-tool...@googlegroups.com.
To post to this group, send email to google-we...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/d/optout.



--

Alain Ekambi

Co-Founder

Ahomé Innovation Technologies

http://www.ahome-it.com/

Alberto Mancini

unread,
Jan 14, 2016, 9:38:04 AM1/14/16
to GWT Users
Hello,
maybe i misunderstand but  i think that an option may be 
drawing the image scaled in a canvas and then using getDataUrl() to get back data to upload. 

Cheers,
   A. 


Greg

unread,
Jan 14, 2016, 9:46:28 AM1/14/16
to GWT Users
Hi

Yes, it's possible. You have to read the contents of selected file first and then use Canvas to resize it (link).

Julio Heitor Nobrega

unread,
Jan 14, 2016, 1:17:36 PM1/14/16
to GWT Users
Hi guys,

thanks everyone for the answers!

Greg,  is Canvas a GWT framework or its a class that belong to GWT itself?

Do you have any example of use?

Regards

Kirill Prazdnikov

unread,
Jan 14, 2016, 1:36:19 PM1/14/16
to GWT Users
Canvas is an DOM Element.
It can render Image Elements to itself in any resolution.
However it may produce not nice results.

It depends on what you need.

Julio Heitor Nobrega

unread,
Jan 25, 2016, 9:09:40 AM1/25/16
to google-we...@googlegroups.com
Does anyone have some examples regarding the Canvas class?

I've seen the java doc API but the only methods i think that could be useful was:

Context2d getContext2d()
          Returns a 2D rendering context.
 void setCoordinateSpaceHeight(int height)
          Sets the height of the internal canvas coordinate space. 
void
setCoordinateSpaceWidth(int width)
          Sets the width of the internal canvas coordinate space. 

--
You received this message because you are subscribed to a topic in the Google Groups "GWT Users" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-web-toolkit/8OfazCLtcLA/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-web-tool...@googlegroups.com.

Julio Heitor Nobrega

unread,
Jan 25, 2016, 9:19:03 AM1/25/16
to google-we...@googlegroups.com
I have just found an example (http://c.gwt-examples.com/home/ui/canvas).

The only problem is to convert ImageData to an byte array :)

Regards!


Greg

unread,
Jan 25, 2016, 9:43:53 AM1/25/16
to GWT Users
Just use context.getCanvas().toDataUrl(); which will return data uri with the contents of the canvas. You can use it directly in <img src=""> element or send it to server.
To unsubscribe from this group and all its topics, send an email to google-web-toolkit+unsub...@googlegroups.com.

Julio Heitor Nobrega

unread,
Jan 25, 2016, 9:52:47 AM1/25/16
to google-we...@googlegroups.com
Thanks for your answer Greg!

Actually, i really need a byte array because i will store it in a BLOB database column.

Regards!

To unsubscribe from this group and all its topics, send an email to google-web-tool...@googlegroups.com.
To post to this group, send email to google-we...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to a topic in the Google Groups "GWT Users" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-web-toolkit/8OfazCLtcLA/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-web-tool...@googlegroups.com.

Julio Heitor Nobrega

unread,
Jan 25, 2016, 10:00:25 AM1/25/16
to google-we...@googlegroups.com
As a matter of fact, i am beginning to think that its more wise to send the whole image to the server, scale it using Scalr and store it into the DB.

I want to have the control of the image size, test levels of quality. The Scalr has a mode called 'Automatic' that fits your image to the dimensions you pass to it.

None of it i will have with GWT Canvas.

The only drawback i would get using Scalr is that i will consume more bandwidth DigitalOcean  gives me monthly because i will have to send the whole image to the server.

Alain Ekambi

unread,
Jan 25, 2016, 10:40:27 AM1/25/16
to google-we...@googlegroups.com
Would it be a better designer to save the image on disc and just save the link to the image to the DB ? 

You received this message because you are subscribed to the Google Groups "GWT Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-web-tool...@googlegroups.com.

To post to this group, send email to google-we...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/d/optout.



--

Julio Heitor Nobrega

unread,
Jan 25, 2016, 11:12:13 AM1/25/16
to google-we...@googlegroups.com
Hi Alain,

i am doing exactly that. I am sending the byte array to the server, saving it as a file in a directory and storing the path in a DB column.

My problem is to get the byte array from the file (is it possible to get the byte array using FileUpoad?) and work on it before send to the server.

Alain Ekambi

unread,
Jan 25, 2016, 11:23:06 AM1/25/16
to google-we...@googlegroups.com
I think what you should to is get the base64  representation of the image from the canvas. Something like 

var p;var canvas = document.createElement("canvas");
var img1=document.createElement("img"); 

function getBase64Image(){     
    p=document.getElementById("fileUpload").value;
    img1.setAttribute('src', p); 
    canvas.width = img1.width; 
    canvas.height = img1.height; 
    var ctx = canvas.getContext("2d"); 
    ctx.drawImage(img1, 0, 0); 
    var dataURL = canvas.toDataURL("image/png");alert("from getbase64 function"+dataURL );    
    return dataURL;
} 
Then send the base64 to the server and corvert it to byterarry or whatever format you need there to save it to disc,

Julio Heitor Nobrega

unread,
Jan 25, 2016, 11:59:09 AM1/25/16
to google-we...@googlegroups.com
Hi Alain,

nice code! I am going to do this but in a java version code. I just didn't know i could get the image path from a 'value' of the
document.getElementById("fileUpload")
I could even show a image preview to the user before send it to the server!

Or maybe convert the base64 String to byte array, scale it and then send to the server :)

Thanks!

Julio Heitor Nobrega

unread,
Jan 25, 2016, 12:16:33 PM1/25/16
to google-we...@googlegroups.com
Is there a way to see what format the file has? If it isn't an image i'll have to warn the user.

thi...@cruxframework.org

unread,
Jan 26, 2016, 9:23:04 AM1/26/16
to GWT Users
Crux framework has an utility class that already implement this. You can check the class here: https://github.com/CruxFramework/crux/blob/master/crux-dev/src/main/java/org/cruxframework/crux/core/client/image/ImageProcessor.java 


claudio sergio Goncalves

unread,
Jan 27, 2016, 4:19:15 AM1/27/16
to GWT Users
Hi julio

i use this routine to redimensione my images

public static BufferedImage redimensionarImagem(BufferedImage img, int maltura, int mlargura) throws Exception {

java.awt.Image imagem = (java.awt.Image) img;
java.awt.Image thumbs = ((java.awt.Image) imagem)
.getScaledInstance(mlargura, maltura, BufferedImage.SCALE_SMOOTH);
BufferedImage buffer = new BufferedImage(mlargura, maltura, BufferedImage.TYPE_INT_RGB);
buffer.createGraphics().drawImage(thumbs, 0, 0, null);
return buffer;
}
pass the width and height in pixels (maltura e mlargura)
After thar you can upload the image.

cheers

Claudio


Em quinta-feira, 14 de janeiro de 2016 11:25:29 UTC-2, Julio Heitor Nobrega escreveu:

Kirill Prazdnikov

unread,
Jan 27, 2016, 5:01:32 AM1/27/16
to GWT Users
How do you use AWT code in client GWT code ?

Julio Heitor Nobrega

unread,
Jan 27, 2016, 5:13:32 AM1/27/16
to google-we...@googlegroups.com
Hi Claudio,

thank you for your post. You method could only be used if implemented on the server side.

GWT does not support the awt API.

Regards!

Alain Ekambi

unread,
Jan 27, 2016, 5:28:45 AM1/27/16
to google-we...@googlegroups.com
The fileupload widget can control what kind of files can be uploaded.
There you can restrict the files only to images.
Reply all
Reply to author
Forward
0 new messages