如何在JS

Question

我正在实施与图形相关的网络应用，我想检测图像分辨率并验证用户是否正在上传DPI太低的图片

我怎样才能做到这一点？

1. 这是否有图书馆？
2. HTML 5 canvas中是否有解决方案或Konvajs（HTML画布库）
3. 是否有支持确定上传图像分辨率的图像上传器？

Answer 1

大多数现代文件上传器都可以让您访问图像尺寸，或者您可以使用文件读取器将图像加载到隐藏的dom图像对象中并以此方式获取尺寸。 this SO question中的示例。

但他们不会告诉您图像是否适合您的预期用途。你必须自己做一些数学来决定。

要确定图像是否可以接受，我们需要从目标开始。我们需要知道最终输出DPI和测量尺寸。我将只看宽度，但同样的计算也适用于高度。例如DPI，对于PC屏幕，DPI为96，对于体面的喷墨打印机，它可能高达4800乘1200.商业打印范围从300到2400。

接下来，我们需要知道目标区域大小 - 换句话说，测量。我会在这里使用英寸来保持简单。

我们需要做的计算是：

Image size dots / (target size inches * DPI)

这会产生使图像适合目标空间所需的图像缩放。如果图像点大小是目标大小的两倍，则比例为0.5，如果图像点大小是目标的3倍，则比例为3.

接下来，我们需要了解图像可接受的缩放范围。这是任意的，取决于手头的情况。

让我们举一个例子 - 制作一张3.5英寸x 2英寸的名片，我们希望将上传的图片放在背面。我们的印刷速度为300 DPI。用户上传800px宽的图像。我将忽略宽高比以保持简单。

我们需要完成的计算是 -

1. 完美的图像点尺寸为：3.5英寸x 300 DPI = 1050点。
2. 将图像缩放到目标= 800/1050 = 0.76
3. 假设可接受的比例范围为0.8x - 4x。
4. 结论：图像不合适，因为步骤2的比例超出了步骤3中定义的范围。