Jquery determine Effective DPI to scale image in Canvas

Question

I’m using cropit.js to allow a visitor to upload a large JPEG or TIFF image which is intended for print. I print at 300DPI.

The dimensions of the cropit.js HTML 5 canvas are determined by the visitor (using a numberfield in a previous script, these dimensions are passed as a var to the cropit.js HTML 5 canvas. This all works great.

Some images will not initially be suitable or require resizing by the visitor. Cropit.js should be great for this.

My query: I’d like to show the effective size of an uploaded image, its size in comparison to the HTML 5 Canvas (which is a representation of the final printed image @ 300DPI). The maths / calculations required blow my mind. Can anyone help?

1. Can code detect screen DPI? No it seems not.
2. Can a calculation be done to show the effective print size? Seems not.
3. What maths do I require to display an emulated size (taking into account the resolution of the uploaded image), and the dimensions entered by a visitor?

This can be easily exemplified in Photoshop, where you make a 'canvas' (photoshop canvas size) of say, 210 x 210mm at 300DPI. If you then drop a 1000x2000px image of 72DPI into the canvas... it doesn't quite work, user either has to upsize, and crop. This is the functionality I'd like to mimic with cropit.js

    <script>
  $(function() {
    $('.image-editor').cropit({
      imageState: {
        src: 'imagedir/image1000x2000px.jpeg',
      },
    });

    $('.preview-wrapper').cropit('previewSize', { width: ''+ var_numberfield_width+'', height: ''+var_numberfield-height+'' });

    $('.export').click(function() {
      var imageData = $('.image-editor').cropit('export');
      window.open(imageData);
    });
  });
</script>

---

As I work on a complete answer I thought I might bring together a load of links I'm finding interesting reading. Might be helpful in future:

• find screen dimensions in inches not pixels using javascript
• How to check image quality/resolution/dpi/ppi?
• Adding "photoshop"-like rulers to jquery http://jsfiddle.net/vivekkt91/gaoywr9s/8/
• Calculating image size in inches or dpi from pixels using php
• https://github.com/scottcheng/cropit/issues/99

Answer 1

can code detect screen DPI?

Sadly No, there is no way to detect the real physical size of a pixel and hence the display size and DPI. Though you can have a list of known devices/screens/resolutions and ask the client what hardware they have, but that has as many problems as there are different devices.

Can a calculation be done to show the effective print size?

As this related to the first question, the answer is no.

I wonder if there is a clever way, with JQuery, or HTML5 to read the 'dropped' image dimensions, to calculate the DPI and display the relative size of the image within the HTML5 Canvas?

To get the resolution (not DPI) of the image, you just load it

var image = new Image();
image.src = /*dropped image URL*/
image.onload = function(){ // need to wait till it has loaded
     width = image.width;  // number of pixels across
     height = image.height;  // number of pixels down.
}

The DPI is only loosely tied to the resolution. You can not increase the image resolution. Doing so will only blur the image. The image in its dropped form is at the max DPI it will ever be. DO NOT SCALE the image before upload in any way. (Unless it is too big)

The image you display in the canvas is not what you will up load. In the snippet above the image can be drawn at any resolution.

Say your canvas is 1024 by 1024 and the image loaded is 4096 by 2048. You need to show the image on the low res canvas by uniformly scaling it and then rendering it at that scale. Rendering it to the canvas does not effect the image, it still retains its original resolution.

To get the correct scale to show the whole image

 var scale = Math.min(image.width / canvas.width, image.height / canvas.height);
 // to display the image on the canvas
 ctx.drawImage(image,0,0,image.width * scale,image.height * scale);

When working with images on computers forget about the DPI, it is meaningless as you have no way to know how big a dot (pixel) is. DPI is a function of the printer.

You can once the client has selected a print size give an effective DPI (I prefer PPI (pixels per inch)) which is the number pixels divide the print size in inches. For example a reasonable image 5184 by 3456 pixels on a 7" by 5" print will give a DPI of ~740DPI but if you change the print size 16" by 12" the DPI becomes ~432DPI. All that has changed is the print size, the image has not changed at all.