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?

Can code detect screen DPI? No it seems not.
Can a calculation be done to show the effective print size? Seems not.
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

可以代码检测屏幕DPI吗？

可悲的是，没有办法检测像素的实际物理尺寸，从而检测显示尺寸和DPI。虽然您可以拥有已知设备/屏幕/分辨率的列表，并询问客户端它们具有哪些硬件，但是存在与不同设备一样多的问题。

是否可以进行计算以显示有效的打印尺寸？

由于这与第一个问题有关，答案是否定的。

我想知道是否有一种聪明的方法，使用JQuery或HTML5来读取'已删除的'图像尺寸，计算DPI并在HTML5画布中显示图像的相对大小？

要获得图像的分辨率（而不是DPI），只需加载它

即可

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.
}

DPI只与分辨率紧密相关。您无法提高图像分辨率。这样做只会模糊图像。丢弃形式的图像处于最大DPI。请勿在上传之前以任何方式缩放图像。（除非它太大了）

您在画布中显示的图像不是您要加载的图像。在上面的片段中，可以以任何分辨率绘制图像。

假设您的画布是1024 x 1024，并且加载的图像是4096到2048.您需要通过均匀缩放它然后以该比例渲染它来在低分辨率画布上显示图像。将其渲染到画布不会影响图像，它仍然保留其原始分辨率。

获得正确的比例以显示整个图像

 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);

当在计算机上处理图像时忘记DPI，它没有意义，因为你无法知道点（像素）有多大。 DPI是打印机的功能。

您可以在客户选择打印尺寸后给出有效的DPI（我更喜欢PPI（每英寸像素数）），这是以英寸为单位划分打印尺寸的像素数。例如，7“×5”打印上的合理图像5184×3456像素将给出~740DPI的DPI，但如果将打印尺寸16“改为12”，则DPI变为~432DPI。所有改变的是打印尺寸，图像根本没有改变。

Jquery determine Effective DPI to scale image in Canvas

1 个答案: