Javascript 如何在JS中确定图像上传质量

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

我怎样才能做到这一点

这里有图书馆吗？ HTML5Canvas或KonvajsHTMLCanvas库中是否有解决方案 是否有支持确定上传图像分辨率的图像上传程序？

---

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

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

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

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

我们需要做的计算是：

Image size dots / (target size inches * DPI)

这将生成在目标空间中适合图像所需的图像缩放。如果图像点大小是目标大小的两倍，则比例为0.5；如果图像点大小是目标大小的3倍，则比例为3

接下来，我们需要知道图像的可接受缩放范围。这是武断的，取决于当时的情况

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

我们需要完成的计算是-

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

---

大家好，欢迎光临。与Konva.js或任何其他特定的库相比，这个问题更多的是关于确定上传图像的适用性的技术。请参阅下面我的答案，了解数学方法。是的，这是我的意图，确定图像质量是否适合设计。非常感谢您的建议。