Javascript Jquery确定在画布中缩放图像的有效DPI

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

cropit.js HTML 5画布的尺寸由访问者决定（在前面的脚本中使用一个numberfield，这些尺寸作为变量传递给cropit.js HTML 5画布。这一切都非常有效

有些图片一开始不适合，或者需要访问者调整大小。Cropit.js应该适合这样做

我的问题：我想显示上传图像的有效大小，它的大小与HTML 5画布（它是最终打印图像@300DPI的表示）相比。所需的数学/计算让我大吃一惊。有人能帮忙吗

代码能检测屏幕DPI吗？不，似乎不能

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

显示模拟尺寸（考虑上传图像的分辨率）和访客输入的尺寸需要什么数学

这一点在Photoshop中很容易得到证实，在Photoshop中，你可以以300DPI的速度制作一张210 x 210mm的“画布”（Photoshop画布大小）。如果你将一张72DPI的1000x2000px图像放入画布中……这不太管用，用户或者必须进行放大和裁剪。这是我想用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>

$（函数（）{
$（'.image editor'）.cropit({
图像状态：{
src:'imagedir/image1000x2000px.jpeg'，
},
});
$（'.preview wrapper'）.cropit（'previewSize'，{width:'+var\u numberfield\u width+''，height:'+var\u numberfield-height+'}）；
$（'.export'）。单击（函数（）{
var imageData=$（'.image editor'）.cropit（'export'）；
窗口。打开（图像数据）；
});
});

---

当我准备一个完整的答案时，我想我可能会收集一大堆我发现有趣的阅读链接。将来可能会有帮助：

• 向jquery中添加类似“photoshop”的标尺

代码可以检测屏幕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 x 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×12DPI变为~432DPI。更改的只是打印大小，图像根本没有更改。

？画布？您是指真实世界画布或HTML5元素画布？DPI对HTML5画布没有任何意义。您可以通过指定宽度和高度（英寸或厘米）来设置打印作业，DPI取决于打印质量，如果客户希望上传1×1像素的图像以10×10英寸打印，则显示打印作业为10“x 10”@300DPI。如果它是一幅真实的画布，你的意思是它必须有一个物理尺寸，你可以使用打印尺寸除以画布尺寸来缩放屏幕上显示的图像，这可能是什么尺寸。如果你得到模糊/模糊的图像，你应该看看这篇文章，如果你还没有。@Blindman67-对不起，我读了我的问题，看起来我没有asn最初不太清楚。重新编写，是的，我相信cropit.js使用HTML画布，我们不是在谈论真实世界的画布（我不打印，它们是令人讨厌的东西！）。感谢您的输入。@LarryTurtis有趣的东西，谢谢！这可能会帮助您计算与输出设备分辨率（即打印机）相等的图像大小：这是难以置信的深思熟虑。我需要在早上喝一杯浓咖啡来了解你的评论。一个网站，如计算“有效DPI”-当你上传图像时，如果文件的分辨率（用于打印），该网站（其他网站）会显示警告与用户输入的尺寸相比太低。只是一个查询！对您的输入非常感兴趣。@Callum一旦您有了打印尺寸，您就可以得到DPI，即image.width/打印宽度（以英寸为单位）。好的DPI取决于观看距离。例如，覆盖10层建筑大小的图像约为0.1DPI，但没有人接近它的fine.对于小字体5by7，低于300或150 DPI的任何内容都应该有警告。人类视觉可以分辨0.02°deg，因此在1米处，我们可以看到小到0.3mm（约25 DPI）的东西。完全可以听到您对PPI和DPI的混淆