如何在JS中决定图片上传质量
How to decide image upload quality in JS
我正在实现一个与图形相关的 Web 应用程序，我想检测图像分辨率并验证用户上传的图像是否 DPI 太低
我怎样才能做到这一点？
- 有这方面的图书馆吗？
- 在 HTML 5 canvas 或 Konvajs（HTML canvas 库）
中是否有解决方案
- 有没有支持判断上传图片分辨率的图片上传器？
大多数现代文件上传器都会让您访问图像尺寸，或者您可以使用文件读取器将图像加载到隐藏的 dom 图像对象中，并以此方式获取尺寸。 this SO question.
中的示例
但他们不会告诉您图像是否适合您的预期用途。你必须自己做一些数学来决定。
要确定图像是否可以接受，我们需要从目标开始。我们需要知道最终输出的 DPI 和测量的尺寸。我只会看宽度，但同样的计算也适用于高度。 DPI 示例，对于 PC 屏幕，DPI 为 96，对于像样的喷墨打印机，它可能高达 4800 x 1200。商业印刷范围从 300 到 2400。
接下来我们需要知道目标区域的大小——换句话说就是测量值。为了简单起见，我将在这里使用英寸。
我们需要做的计算是：
Image size dots / (target size inches * DPI)
这会生成使图像适合目标所需的图像缩放 space。如果图像点大小是目标大小的两倍，则比例为 0.5，如果图像点大小是目标大小的 3 倍，则比例为 3。
接下来我们需要知道图像可接受的缩放范围。这是任意的，取决于手头的情况。
举个例子 - 制作一张 3.5 英寸 x 2 英寸的名片，我们想在背面放一张上传的图片。我们以 300 DPI 打印。用户上传一张 800 像素宽的图片。为了简单起见，我将忽略纵横比。
我们需要完成的计算是 -
- 完美的图像点大小为：3.5 英寸 x 300 DPI = 1050 点。
- 图像到目标的缩放比例 = 800 / 1050 = 0.76
- 假设可接受的比例范围为 0.8x - 4x。
- 结论：图像不合适，因为步骤 2 中的比例超出了步骤 3 中定义的范围。
我正在实现一个与图形相关的 Web 应用程序，我想检测图像分辨率并验证用户上传的图像是否 DPI 太低
我怎样才能做到这一点？
- 有这方面的图书馆吗？
- 在 HTML 5 canvas 或 Konvajs（HTML canvas 库） 中是否有解决方案
- 有没有支持判断上传图片分辨率的图片上传器？
大多数现代文件上传器都会让您访问图像尺寸，或者您可以使用文件读取器将图像加载到隐藏的 dom 图像对象中，并以此方式获取尺寸。 this SO question.
中的示例但他们不会告诉您图像是否适合您的预期用途。你必须自己做一些数学来决定。
要确定图像是否可以接受，我们需要从目标开始。我们需要知道最终输出的 DPI 和测量的尺寸。我只会看宽度，但同样的计算也适用于高度。 DPI 示例，对于 PC 屏幕，DPI 为 96，对于像样的喷墨打印机，它可能高达 4800 x 1200。商业印刷范围从 300 到 2400。
接下来我们需要知道目标区域的大小——换句话说就是测量值。为了简单起见，我将在这里使用英寸。
我们需要做的计算是：
Image size dots / (target size inches * DPI)
这会生成使图像适合目标所需的图像缩放 space。如果图像点大小是目标大小的两倍，则比例为 0.5，如果图像点大小是目标大小的 3 倍，则比例为 3。
接下来我们需要知道图像可接受的缩放范围。这是任意的，取决于手头的情况。
举个例子 - 制作一张 3.5 英寸 x 2 英寸的名片，我们想在背面放一张上传的图片。我们以 300 DPI 打印。用户上传一张 800 像素宽的图片。为了简单起见，我将忽略纵横比。
我们需要完成的计算是 -
- 完美的图像点大小为：3.5 英寸 x 300 DPI = 1050 点。
- 图像到目标的缩放比例 = 800 / 1050 = 0.76
- 假设可接受的比例范围为 0.8x - 4x。
- 结论：图像不合适，因为步骤 2 中的比例超出了步骤 3 中定义的范围。