使用Angular与Node.js获取图像尺寸

Getting image dimensions with Angular vs Node.js

本文关键字：图像 获取 js Angular Node 使用      更新时间：2023-09-26

我对发现图像尺寸或图像的自然宽度的最佳方法感到困惑，给定图像的url，最常在<img>标记的src属性中找到。

我的目标是将新闻文章的url作为输入，并使用机器学习来查找文档中最大的5张图片(.jpg， .png等)文件。使用前端这样做的问题是，我不知道如何使用AJAX从一些随机服务器的一些随机页面http GET html，因为CORS相关的问题。

然而，使用Node.js或一些服务器技术，我可以请求从其他服务器获取HTML(正如人们所期望的那样)，但我不知道在不首先下载图像的情况下获取图像大小的方法。问题是，我希望下载的图像在前端，而不是后端，因此用Node.js下载图像是浪费精力，如果只是为了检查图像尺寸。

有人遇到过这个问题吗?不知道如何继续。正如我所说，我的目标是在前端下载图像，并保留宽度大于300px的图像。

两种方法都可以，这在很大程度上取决于您需要在性能方面实现什么:

对我来说，最简单的方法是在客户端，然后你只需要几行JavaScript就可以做到:

var img = new Image();
img.onload = function() {
  console.log(this.width + 'x' + this.height);
}
img.src = 'http://www.google.com/intl/en_ALL/images/logo.gif';

在服务器端也是可能的，但你需要安装GraphicsMagick或ImageMagick。我会选择GraphicsMagick，因为它更快。

一旦你安装了程序和它的模块(npm install gm)，你可以这样做来获取宽度和高度。

gm = require('gm');
// obtain the size of an image
gm('test.jpg')
.size(function (err, size) {
  if (!err) {
    console.log(size.width + 'x' + size.height);
  }
});

另外，这个模块看起来不错，我还没用过但它看起来很有前途https://github.com/netroy/image-size

从html字符串 中获取img url

你可以使用一个简单的http请求来加载你的html字符串，然后你需要使用regexp捕获组来提取url，如果你想要全局匹配g，即不止一次，当使用捕获组时，你需要在循环中使用exec (match在全局匹配时忽略捕获组)。

这样你就可以把所有的源文件放在一个数组中。

例如:

var m;
var urls = []; 
var rex = /<img[^>]+src="?([^"'s]+)"?'s*'/>/g;
// this is you html string
var str = '<img src="http://example.com/one.jpg />'n <img src="http://example.com/two.jpg />'; 
while ( m = rex.exec( str ) ) {
    urls.push( m[1] );
}
console.log( urls ); 
// [ "http://example.com/one.jpg", "http://example.com/two.jpg" ]

希望能有所帮助。

相关文章：