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

[Julio Heitor Nobrega]

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]

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]

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]

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]

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]

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]

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]

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]

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]

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]

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]

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]

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]

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]

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]

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]

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]

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]

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]

How do you use AWT code in client GWT code ?

[Julio Heitor Nobrega]

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]

The fileupload widget can control what kind of files can be uploaded.

There you can restrict the files only to images.