I'm creating a HTML5 upload plugin (I'll link to it when it is completed) that reads an image from the file system, and then displays the image onto a canvas. I then read the canvas data and send it up to a server for processing.
Displaying the image on a canvas smaller than the original image dimension shrinks the file size down. What I noticed was that for a canvas of dimension 1024 x 768, the file size was the same for an input file of 5MB and an input file of 100+MB (around 1.1MB), which leads me to the question I ask today!
In uncompressed form, yes - in compressed form no, not necessarily.
In compressed form content is the dominating factor as well as type of compression. The more high-frequency signal the image has (noise, details) the harder the image is to compress, so two images of the same dimension can be compressed to two different sized depending on the content.
One small image with high frequencies can become larger than a large dimension image with low frequency (blurred, noise-free etc.).
If you get an image with large size after compression you can use low-pass filtering on it (ie. here: blur it a bit).
The image dimension is directly proportional to the image size. If you are processing the image before sending it to the server and resizing it then your no doubts your image size is going to be affected.
I found that images are resized in all kind of actions, e.g. by opening a jpg file and writing it back again, by using your PC's encoder which may give a different result than the original encoder did. I am still looking for a way to prevent that! So it seems logical that using a canvas and reading the image from there also changes the file size. I assume these links may help you further:
HTML5 canvas: image resizing
Html5 Canvas resize
Dick
Related
I am building a web-based image editor, and everything seems to work fine until very large images are uploaded (>5mb), and then operations like adjusting the brightness using a slider takes a while to reflect. The issue is quite obvious, and that is because I have to loop through each pixel (step of 4) in context.getImageData().data in order to modify each pixel value.
I checked out a couple of already existing online image editors, and theirs seem to work pretty well without lags.
Initially, my first step was to resize the image to fit the canvas on the screen which worked fine without lags, but why I switched to modifying the original image size was because the original size does not change compared to the one on the screen which changes if the user resizes the screen (or if chrome displays the currently downloading bar at the bottom of the browser), and since it is constant, I can always keep track of all editing operations, and then display on the screen by basing scaling down to fit the screen.
I'd love to know how I can optimize for large-sized images, without losing the quality of the original (due to resizing etc). Thanks!
[UPDATED]
This was copied from a comment under this post.
"JavaScript is not suited for image pixels editing. That is what the GPU is for. Most image manipulation needs can be done using filters, standard 2D canvas as they use the hardware designed for the task. If you have custom PX manipulation needs then WebGL is the solution."
My goal is to allow users to upload a profile image, and to crop the image prior to uploading in order to fit nicely in the image container. This is a very common issue.
The problem I’m having is that when the user is using a mobile device, the cropped and uploaded image ends up being roughly 350 pixels wide, which results in highly pixelized images when viewed on a large screen that ends up stretching the image as needed (upwards of 700 pixels).
The flow is as follows: user chooses new image locally to upload; this image is then implanted into the browser in order to be cropped; the resulting cropped image (base64) comes out with the correct aspect ratio, but the size (width and height) in pixels is in accordance with the devices screen width, which may be very small depending on the device.
I’m using Croppie.js to do the cropping, which works fine. However, the resulting base64 image located in the browser is very small in pixels when cropped on a small device (phone, etc.). The base64 image is what ends up getting uploaded, so this results in the problem mentioned above with stretching and pixelization on larger devices.
Any input or other techniques that I’ve overlooked would be greatly appreciated.
Per https://foliotek.github.io/Croppie/ :
when you call for result, using size = original should get you the higher quality image, which you can scale to the size you need when you display it.
I have small sized <img> in which I put very large pictures. This makes image loading slow and is a waste since I dont really need to download the whole big picture, I show it in very small size.
Is there a way to make HTML load lower resolution images instead of full image resolution? so the loading will be quicker.
There is no feature of HTML (that I am aware of) that automatically generates a thumbnail sized image for you for faster loading. Some sites will do that automatically when you upload like on Wordpress or various e-commerce solutions. So unless you are using one of those, you will have to do your own image re-sizing, before you upload, or write your own feature of the site that resizes images on the fly on the server side.
You have to do this work on the server side, since HTML/CSS/JS are all client side only (node.js non-withstanding) and could only do the resizing for you once the image was already downloaded, which defeats the purpose.
My application uses the File API in HTML5 to have drag and drop capabilities. I also needed to ensure that the files that are dropped obey a 72 pixels/inch resolution ratio.
How do I find the resolution of the image using HTML5 or Javascript?
DPI is a hardware measurement, more specifically used in print, and doesn't apply to image data when viewed on a screen. A pixel is a pixel and the size of it depends on the resolution of the screen you are viewing it on, not a setting in the image file.
If an image is 72 DPI and 72 px wide, it will show up as 72 px wide. If an image is 144 DPI and 72 px wide, it will show up as the same size on the screen. However, in print the 144 DPI image will be half the width as th 72 DPI image.
Here's a (slightly outdated) JavaScript EXIF Reader.
I would also recommend reading this answer here on SO.
You can use blueimp Javascript-Load-Image library. You can use exif data parsing methods to parse image dpi and other informations from the image. You can load the image locally from file tags or from the image urls as per requirement.
Mostly jpeg images and raw image formats store dpi information in exif data. Other formats like png don't have provisions for exif data and hence dpi of such images are difficult to extract without actually loading them in image editing tools like photoshop.
I want to load an image of dimensions larger than 2000x2000 pixels on the iPad to show in canvas on a webapp - e.g. 4000x4000 pixels. Due to memory limit, this doesn't work. Could it be possible to load the image into htmlstorage, tile it there, and then show only tiles in the canvas? Or is the limit of around 2000x2000 pixels absolute? I could tile on server, but it is not too easy to do for the current application.
There are some discussion about loading several images which are more than 6 MB in total (e.g. iPad/iPhone browser crashing when loading images in Javascript ), but this does not apply to my case as I have one image which itself is over the memory limit.
I'd try splitting the image as you suggest and see if some of it can be saved to sessionStorage/localStorage. However don't forget there appears to be a 5MB limit for localStorage (Limit of localstorage on iPhone?) on iOS.