Develop Reference

Uploading cropped image from multiple devices while maintaining larger image size

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.

How to decide image upload quality in JS

I'm implementing a graphic related web app and I want to detect the image resolution and validate if the user is uploading an image with too low DPI
How can I achieve this?
Is there a library for this?
Is there a solution in HTML 5 canvas for this, or in Konvajs (HTML canvas library)
Is there any image up-loader that supports determining uploaded image resolution?

Most modern file uploaders will give you access to image dimensions, or you can use a filereader to load the image into a hidden dom image object and get the sizes that way. Example in this SO question.
But they will not tell you if the image is suitable for your intended use. You have to do some math yourself to decide that.
To decide if an image is going to be acceptable, we need to start with the target. We need to know the final output DPI and the measured dimensions. I will look at the width only but the same calculations work for the height too. Example DPI's, for a PC screen the DPI is 96, for a decent inkjet printer it might be up to 4800 by 1200. Commercial printing ranges from 300 to 2400.
Next we need to know the target region size - in other words a measurement. I will use inches here to keep things simple.
The calculation we need to do is:
Image size dots / (target size inches * DPI)
This produces the image scaling that is needed to fit the image in the target space. If the image dot size is twice the size of the target then the scale is 0.5, if the image dot size is 3 times the target then the scale is 3.
Next we need to know the acceptable range of scaling for the image. This is arbitrary and depends on the circumstances in hand.
Let's take an example - making a business card 3.5 ins x 2 ins where we want to put an uploaded picture on the back. We are printing at 300 DPI. The user uploads an image that is 800px wide. I will ignore aspect ratio to keep it simple.
The calculation we need to complete is -
Perfect image dot size would be: 3.5 ins x 300 DPI = 1050 dots.
Scaling of image to target = 800 / 1050 = 0.76
Assume acceptable scale range of 0.8x - 4x.
Conclusion: The image is not suitable because the scale from step 2 is outside the range defined in step 3.

Is there a relationship between image dimensions and file size?

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

Mobile safari downsamples large images. How to retain?

I have an HTML page with a 1675px by 2640px image in it. I tried viewing it in an iPad and apparently mobile safari downsamples the images. We wanted to show a high quality image but safari restricts this.
I've been searching for a solution to retain the image size. I've been viewing it in iPad 3 on mobile safari. People are suggesting to use another browser but by default we are using mobile safari.
Are there any CSS, JavaScript or other solution to this restriction?

I'm sure you are just going to love this answer, but the short answer appears to be: "you aren't going to get 1:1 large sized images".
The slightly longer answer is that Apple intentionally forces things to work this way because before the way it worked was just to not load the image at all, or crash.
Now, for a fuller answer with citations...
Apple's Known Resoruces Limits
The thing is, when an image is decoded/decompressed it takes up a whole heck of a lot more RAM space than the images filesize. The formula Apple states is that devices with 512mb of RAM, like the ipad 3 you mention, will refuse non-JPEG images above 5 megapixels, which results in:
height * width <= 5 * 1024*1024
For JPEG, Apple notes they will subsample to allow you to view jpegs:
The maximum decoded image size for JPEG is 32 megapixels using subsampling.
JPEG images can be up to 32 megapixels due to subsampling, which allows JPEG images to decode to a size that has one sixteenth the number of pixels. JPEG images larger than 2 megapixels are subsampled—that is, decoded to a reduced size. JPEG subsampling allows the user to view images from the latest digital cameras.
Note that it states 2 megapixels is the limit for full-sized viewing of JPEG, which is 2*1024*1024. As your image is roughly a bit over 4 megapixels, it will be subsampled on iPad 3. And no, there really isn't anything you can do to force it without using an external program.
To use an external program for minimal improvement, see this link where a person recommends GoodReader: Apple Forum, Seeking Full Image Resolution in MiniSfari
And here is another Stackoverflow with a similar question/answer pair: Image Size Limitations in Mobile Safari

Mobile Safari does not downsample progressive JPEGs. Assuming JPEG is an acceptable format for your purposes, simply convert them to progressive encoding. Assuming you have an existing, non-progressive JPEG image, you can use a tool such as jpegtran to losslessly convert the encoding to progressive scan.

To enjoy the retina feature of iPad Retina and iPhone 4 / 5, use doubled size image as follow:
<img src="test.jpg" width="837" height="1320" />
Note the dimension is reduced to half, but the test.jpg does not require to resize.
Alternatively, you can prepare another set of high resolution graphics, and show it when retina screen is detected, using Media Queries ( Modernizr )
Pixel Density Theory: Retina screen puts 2 pixels into 1 pixel, e.g with 320px width, it actually contains 640px contents. Read more here: http://www.sitepoint.com/css-techniques-for-retina-displays/

How do I find the resolution of an uploaded image using HTML5 or Javascript?

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.