【问题标题】:Compare different sizes of same image in Javascript在Javascript中比较同一图像的不同大小
【发布时间】:2016-04-08 19:34:19
【问题描述】:

我创建了三个不同尺寸的相同图像。并给他们起名字image0_thumbnail.webpimage0_medium.webpimage0_original.webp

用户将上传这些图片。我不希望用户选择同名的不同图像(可能来自不同的目录)。

如果他们这样做,那么它将比较同一图像的这些不同尺寸并检查它们是否都是同一图像并分别显示错误。

我遇到了这个 Compare two Images in JavaScript ,但它适用于相同大小的图像。我正在寻找 Javascript 中的解决方案。请帮忙

谢谢。

【问题讨论】:

  • 请提供您的代码实现,您尝试过什么?不要只是寻求解决方案,要展示你的努力
  • 嗨@FredMaggiowski,我不知道如何实现这一点。目前我使用link 中给出的相同实现,但这是针对相同大小的图像。文件名的字符串比较在这里不起作用。
  • 如果您需要实际比较两张不同尺寸的图像以知道它们是相同的图像(仅在不同的比例上)。:正如@Alex Nikulin 建议的那样,您可以拍摄最大的图像并调整其大小到较小的大小并以这种方式进行测试。顺便说一下,如果您是生成缩放图像名称的人,并且您知道一组具有相同名称的图像具有相同的前缀(image0_ 在您的例如)为什么不使用它们?
  • 谢谢。我会试试这个。

标签: javascript image compare


【解决方案1】:

调整为相同大小,然后检查;) 例如我使用Resemble.js 比较图像,这个库可以比较文件、图像和图像数据。 你很幸运,这个库有一个属性scaleToSameSize

resemble(image1).compareTo(image2).scaleToSameSize().onComplete(function(data){
        console.log(data.misMatchPercentage)
});
  1. 在js中读取文件不到1秒。
  2. 将文件转换为图像并加载到内存需要一些时间,还要几秒钟。
  3. 调整大小无需花费任何时间(因为所有数据都已在内存中读取)。
  4. 比较图像无需花费任何时间(因为所有数据都已在内存中读取)。

【讨论】:

  • 嗨@Alex Nikulin,在哪里调整它的大小?在系统上或使用一些 3rd 方插件/脚本并在浏览器中执行?如果系统那么我认为我的浏览器不会允许我这种操作。如果我必须使用一些插件来调整每个图像的大小然后比较它们,那么我认为这个解决方案不会是一个有效的解决方案。如果我错了,请纠正我。
  • 在浏览器中你可以对文件做你想做的事,阅读(通过 dnd 或文件对话框),更改文件内容并上传到服务器,你可以调整图像大小,你可以像 instagram 或 photoshop 那样做效果.您可以读取图像元数据。现在的JS很丰富!!!
  • 和调整图片大小,在js里大概1到10行代码,没有任何插件。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-01-30
  • 1970-01-01
  • 2012-10-15
  • 1970-01-01
  • 1970-01-01
  • 2014-11-27
相关资源
最近更新 更多