验证图像大小 [英] Verify image size

问题描述

好吧就是这样，我的用户系统完美运行，现在在编辑个人资料中，我正在尝试添加更改头像网址选项。

Alright so here it goes, I have my user system working perfectly, and now in the edit profile, I'm trying to add a change avatar URL option.

目前它工作得很好，但对于页面加载时间等，我希望限制普通用户最大300px图像宽度，让我们说大约500px高度，然后调整大小

所以基本上，我只是想要一个javascript函数来验证图像的URL（在文本框中输入），如果它超过了我想要的大小，那么用户会得到一个警告，说远程图像太大了&过程就此结束。

At the moment it's working great, but for pageloads time and such, I'm looking to restrain the normal users to a maximum of 300px images width, and let's say around 500px height, that are then resized in

So basically, I just want a javascript function to verify the URL of an image (entered in a textbox) and if it is over the size I want, well the user gets an alert saying remote image too big & the process ends there.

我尝试了几种方法，但我没有达到目标，所以任何帮助都会非常感激！

I tried several ways, but I never got to my goal, so any help would be greatly appreciated!

tl; dr：用户输入图像在文本框中>单击提交按钮>如果图像超过大小我明确>警告&结束过程

tl;dr : User input image in text box > click submit button > if image is over size i definite > alert & end process

谢谢！

推荐答案

只需创建一个新图像具有该url的对象并在onload事件之后检查其width和height属性。

Just create a new Image object with that url and check its width and height attributes after the onload event.

var img = new Image();
img.onload = function(){
   alert(img.width);
};
img.src = "http://example.com/avatar.png";

没有必要服务器方面，但你应该注意，用户可以覆盖它，因为它只在浏览器上完成。

There is no need for server-side with this, but you should note that users are able to override this since it's done solely on the browser.

这篇关于验证图像大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！