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.
Related
I have a use case to convert images to base64 using the url. But the website loads the image only once. I cannot convert to canvas since it requires a network call and is forbidden for second time.
But I am able to achieve the conversion using the sources panel in chrome which has an option to convert already loaded images to data URI. Ex: https://developers.google.com/web/updates/2015/05/copy-image-as-data-uri
I would like to do this programatically using javascript.
Either I inject a module while the image loads to convert to base64 and store it or access the sources panel in chrome to convert to data URI as it does.
I would like to know if there are any extensions to achieve this.
Thank you
Good day, please I am trying to write an application that stores images I take with Camera automatically to a database. However i want to check the image size(MB) before it can save it.
I read the android Camera.Capture developer note and know I cannot adjust size programatically.
Also I am aware storing in a temporary folder before uploading to database is possible but I am looking for one that does without saving in a temp folder.
Thanks.
If you are using a custom camera then in your callback you's receive a byte array just get the length of this array and divide it by 1024*1024 to get size in MB.
If you are using the Camera intent then you get back a Bitmap whose size can be found by using bitmap.getRowbytes * bitmap.getHeight and then divide it by 1024*1024 to get image size in MB
getRowBytes() * getHeight() seems to be working fine to me.
Your server cannot know the size of the image unless it can look at it. You can use PHP to cap the maximum upload size. Once you have the file on the server as a temporary file, you can analyse it in more detail (dimensions, etc). If the image is "good", then move it to it's permanent location (another directory or as database BLOB), if not then just delete it.
In your cameras PictureCallback:
public void onPictureTaken(byte[] data, Camera camera)
{
int nPictureSize = data.length;
}
the length of the compressed image is simply the length of the byte array
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...
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
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.