I am developing an authentication system which is based on images. For these I needed to use the "Canvas" element of HTML5. Now I want to pass this canvas object (which user selects) to the servlet. How may I achieve this? Please help
You can convert the Canvas into an inline image, and send the result to the servlet by using a XHR request. This blog entry describe how to convert a Canvas to a Base64 encoded image. For the XHR request, Google is your friend...
Related
I'm coding an app for a device, such device will receive a POST request, and send back a multipart/x-mixed-replace binary data stream. I must display such stream on one section of my app's home page.
I searched through, there's very limited resource on such case. So far, I found that if the Motion JPEG is sent from a specific URL, then maybe it's possible to use iframe/img tag to display it. However, my case is different, it seems I have to parse such binary stream then create an Observable to alter the img element on an image html tag once I get a frame from the Motion JPEG binary stream.
Is there a simpler way to do that ? I found https://gist.github.com/legege/5301477, can I use this ?
I actually solved this by myself, and learned a lot in the research.
The core idea is to use a xmlHTTP request to fetch the motionJPEG data, It's about how to transfer binary data.
Then use a web worker to process the binary data.
And finally use canvas to draw the image on ionic page.
Due to the front end JS delay on image loading, such motionJPEG preview would not be so smooth currently in my implementation. But this is possible now with JS.
Please check github https://github.com/makoto-unity/ThetaWifiStreaming
I'm trying to transfer a jpeg from Flash to JavaScript. Is this even possible?
What I mean by that is: Flash is supplied an image from the user and performs some image manipulation. I then need to display that modified image in HTML. Do I need to post the image from the flash to the server and load it in html through a URL, or can I pass it directly from the flash into a javascript Image object through flash's external interface somehow?
What's the best way to do this?
Thanks.
One possible way is to encode your image to base64 and send the string via externalInterface call to JavaScript. On the JavaScript side you will need to decode the received string from base64 back to the original jpeg format.
Here a collection of tutorials to do all the bits needed:
Convert image to base64 in Actionscript: http://swati61.blogspot.de/2011/07/convert-image-to-base64-string-and-vice.html
Convert base64 to image in javascript : Base64 encoding and decoding in client-side Javascript
Communication between Actionscript and JavaScript: http://www.hariscusto.com/programming/communication-between-javascript-and-actionscript-as3-and-vice-versa/
I hope this answers your question.
From the point of view of uploading, we can use MIME multipart to carry multiple files within a single request. I'm wondering if it is possible for a web server returning set of images (binaries) through a single JSON message to the browser at the client side? If so, is it able to be demuxed and rendered by the browser as retrieving multiple images by using tags?
Please advise.
Thanks & regards,
William
You can use base64 to encode the image and included in json. Then use data scheme URI to retrive the image.
More about data scheme URI.
http://en.wikipedia.org/wiki/Data_URI_scheme
please tell me how to get image file size in bytes using javascript.
Thanks
If javascript engine supports canvas elements you can try to use canvas element and getImageData to fetch the pixel data from your image. Then, depending on type of the image you could create the binary representation of this image.
Here is info about canvas element and getImagedata api:
http://www.whatwg.org/specs/web-apps/current-work/#dom-context-2d-getimagedata
If you have a base64-encoded image src, you can use img.src.length * 0.75 to determine very close file size it will take if saved to disk.
To get the image size, you need to access it on the server. Javascript is a client-side utility, so it can't directly retrieve information from a server.
You'd have to send an Ajax request to communicate with the server. Alternatively, when your page is created, save file sizes in <input type='hidden' /> boxes and access them when you need them, or a similar solution.
What is the best way to generate image data from the contents of an HTML canvas element?
I'd like to create the image data such that it can be transmitted to a server (it's not necessary for the user to be able to directly save to a file). The image data should be in a common format such as PNG or JPEG.
Solutions that work correctly in multiple browsers are preferred, but if every solution depends on the browser, recent versions of Firefox should be targeted.
Firefox and Opera have a toDataURL() method that returns a data-URL formatted PNG. You can assign the result to a form field to submit it to the server.
The data URL is base-64 encoded, so you will have to decode it on the server side. You would also need to strip off the "data:image/png;" part of course.
I think a lib you can use is Canvas2Image, it uses native features from Canvas, but it won't work on any browser. I have an optimized version of this lib, if you want to, I'll share it with you.
Then you could get the generated Data URI and send it using Ajax to the server.