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!
2016-01-25 14:22 GMT-02:00 Alain Ekambi <[email protected]>:
> 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,
>
>
>
> On 25 January 2016 at 17:11, Julio Heitor Nobrega <[email protected]
> > wrote:
>
>> 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.
>>
>> 2016-01-25 13:39 GMT-02:00 Alain Ekambi <[email protected]>:
>>
>>> Would it be a better designer to save the image on disc and just save
>>> the link to the image to the DB ?
>>>
>>> On 25 January 2016 at 15:59, Julio Heitor Nobrega <
>>> [email protected]> wrote:
>>>
>>>> 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.
>>>>
>>>> 2016-01-25 12:52 GMT-02:00 Julio Heitor Nobrega <
>>>> [email protected]>:
>>>>
>>>>> Thanks for your answer Greg!
>>>>>
>>>>> Actually, i really need a byte array because i will store it in a BLOB
>>>>> database column.
>>>>>
>>>>> Regards!
>>>>>
>>>>> 2016-01-25 12:43 GMT-02:00 Greg <[email protected]>:
>>>>>
>>>>>> 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.
>>>>>>
>>>>>> On Monday, January 25, 2016 at 3:19:03 PM UTC+1, Julio Heitor Nobrega
>>>>>> wrote:
>>>>>>>
>>>>>>> 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!
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>> 2016-01-25 12:08 GMT-02:00 Julio Heitor Nobrega <[email protected]
>>>>>>> >:
>>>>>>>
>>>>>>>> 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
>>>>>>>> <http://www.gwtproject.org/javadoc/latest/com/google/gwt/canvas/dom/client/Context2d.html>
>>>>>>>> *getContext2d
>>>>>>>> <http://www.gwtproject.org/javadoc/latest/com/google/gwt/canvas/client/Canvas.html#getContext2d%28%29>*
>>>>>>>> ()
>>>>>>>> Returns a 2D rendering context.
>>>>>>>> void *setCoordinateSpaceHeight
>>>>>>>> <http://www.gwtproject.org/javadoc/latest/com/google/gwt/canvas/client/Canvas.html#setCoordinateSpaceHeight%28int%29>*
>>>>>>>> (int height)
>>>>>>>> Sets the height of the internal canvas coordinate space.
>>>>>>>> void *setCoordinateSpaceWidth
>>>>>>>> <http://www.gwtproject.org/javadoc/latest/com/google/gwt/canvas/client/Canvas.html#setCoordinateSpaceWidth%28int%29>*
>>>>>>>> (int width)
>>>>>>>> Sets the width of the internal canvas coordinate space.
>>>>>>>>
>>>>>>>> 2016-01-14 16:36 GMT-02:00 Kirill Prazdnikov <[email protected]>:
>>>>>>>>
>>>>>>>>> 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.
>>>>>>>>>
>>>>>>>>> On Thursday, January 14, 2016 at 9:17:36 PM UTC+3, Julio Heitor
>>>>>>>>> Nobrega wrote:
>>>>>>>>>>
>>>>>>>>>> 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
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>> Em quinta-feira, 14 de janeiro de 2016 11:25:29 UTC-2, Julio
>>>>>>>>>> Heitor Nobrega escreveu:
>>>>>>>>>>>
>>>>>>>>>>> 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!
>>>>>>>>>>>
>>>>>>>>>>>
>>>>>>>>>>> --
>>>>>>>>> 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 [email protected].
>>>>>>>>> To post to this group, send email to [email protected]
>>>>>>>>> .
>>>>>>>>> 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
>>>>>> [email protected].
>>>>>> To post to this group, send email to
>>>>>> [email protected].
>>>>>> 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 the Google
>>>> Groups "GWT Users" group.
>>>> To unsubscribe from this group and stop receiving emails from it, send
>>>> an email to [email protected].
>>>> To post to this group, send email to
>>>> [email protected].
>>>> 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/ <http://ahome-it.com/>
>>>
>>> --
>>> 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
>>> [email protected].
>>> To post to this group, send email to [email protected]
>>> .
>>> 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 the Google Groups
>> "GWT Users" group.
>> To unsubscribe from this group and stop receiving emails from it, send an
>> email to [email protected].
>> To post to this group, send email to [email protected].
>> 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/ <http://ahome-it.com/>
>
> --
> 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
> [email protected].
> To post to this group, send email to [email protected].
> 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 the Google Groups "GWT
Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/d/optout.
