javascript - Jquery 确定有效 DPI 来缩放 Canvas 中的图像

Question

我使用cropit.js 来允许访问者上传用于打印的大型 JPEG 或 TIFF 图像。我以 300DPI 打印。

cropit.js HTML 5 Canvas 的尺寸由访问者确定(在之前的脚本中使用数字字段，这些尺寸作为 var 传递到cropit.js HTML 5 Canvas 。这一切都很好。

某些图像最初不适合或需要访问者调整大小。 Cropit.js 应该非常适合这个。

我的查询:我想显示上传图像的有效尺寸，以及与 HTML 5 Canvas(代表最终打印图像 @ 300DPI)相比的尺寸。所需的数学/计算让我大吃一惊。有人可以帮忙吗？

1. 代码可以检测屏幕 DPI 吗？不，似乎不能。
2. 可以通过计算来显示有效的打印尺寸吗？似乎不行。
3. 要显示模拟尺寸(考虑到上传图像的分辨率)以及访问者输入的尺寸，需要进行哪些数学运算？

这可以在 Photoshop 中轻松地举例说明，您可以在 Photoshop 中制作一个“ Canvas ”(Photoshop Canvas 尺寸)，例如 210 x 210mm、300DPI。如果您随后将 72DPI 的 1000x2000 像素图像放入 Canvas 中...它不太有效，用户必须放大并裁剪。这是我想用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>

<小时/>

当我研究一个完整的答案时，我想我可以收集大量我发现有趣的阅读链接。将来可能会有帮助:

• find screen dimensions in inches not pixels using javascript
• How to check image quality/resolution/dpi/ppi?
• 向 jquery 添加类似“photoshop”的标尺 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?

遗憾的是，没有办法检测像素的实际物理尺寸，从而检测显示尺寸和 DPI。虽然您可以拥有已知设备/屏幕/分辨率的列表，并询问客户他们拥有什么硬件，但这会带来与不同设备一样多的问题。

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

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

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?

要获取图像的分辨率(而不是 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。上传前请勿以任何方式缩放图像。 (除非太大)

您在 Canvas 中显示的图像不是您要上传的图像。在上面的代码片段中，可以以任何分辨率绘制图像。

假设您的 Canvas 尺寸为 1024 x 1024，加载的图像尺寸为 4096 x 2048。您需要通过统一缩放图像，然后以该比例渲染图像，在低分辨率 Canvas 上显示图像。将其渲染到 Canvas 不会影响图像，它仍然保留其原始分辨率。

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

 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"x 5"打印上，合理的 5184 x 3456 像素图像的 DPI 约为 740DPI，但如果将打印尺寸更改为 16"x 12"，则 DPI 变为约 432DPI。改变的只是打印尺寸，图像根本没有改变。