javascript - 如何在 JS 中决定图片上传质量

Question

我正在实现一个与图形相关的网络应用程序，我想检测图像分辨率并验证用户是否上传了 DPI 过低的图像

我怎样才能做到这一点？

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

标签： javascriptimage-uploadingkonvajs

Answer 1

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

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

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

接下来我们需要知道目标区域的大小——也就是一个测量值。我将在这里使用英寸来保持简单。

我们需要做的计算是：

Image size dots / (target size inches * DPI)

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

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

让我们举个例子——制作一张 3.5 英寸 x 2 英寸的名片，我们想在背面放一张上传的图片。我们以 300 DPI 打印。用户上传一张 800 像素宽的图片。我将忽略纵横比以保持简单。

我们需要完成的计算是——

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