如何在JavaScript中检查高度和宽度图像
how to check height and width image in javascript
如何在javascript中检查高度和宽度图像?
我的代码是:
jQuery.validator.addMethod('allowdimensions', function (value, element, params) {
if (element.files.length < 1) {
// No files selected
return true;
}
if (!element.files || !element.files[0].size) {
// This browser doesn't support the HTML5 API
return true;
}
var minWidth = parseInt(params['minwidth'], 10);
var maxWidth = parseInt(params['maxwidth'], 10);
var minHeight = parseInt(params['minheight'], 10);
var maxHeight = parseInt(params['maxheight'], 10);
var image = {
width: 0,
height: 0
};
var reader = new FileReader();
var img = new Image();
reader.addEventListener("load", function () {
img.src = reader.result;
}, false);
reader.readAsDataURL(element.files[0]);
return image.width >= minWidth &&
image.width <= maxWidth &&
image.height >= minHeight &&
image.height <= maxHeight;
});
image.width
和image.height
总是0
;要读取图像,会出现延迟。我不知道如何在返回输出之前读取图像。
尝试这样做。
reader.onload = function (e)
{
image.src = e.target.result;
image.onload = function ()
{
// access image size here
if (this.width < 100 && this.height < 100)
{
// alert("To Small Image or your message");
}
}
}
Punit 答案是正确的。但是如果你使用的是jQuery,你可以使用这个:
$('#image_id').load(function(){
var Img_Width = $(this).width();
var Img_Height = $(this).height();
});
您的宽度和高度为 0,因为图像可能尚未加载到浏览器中。
我对你在这里想做什么有点困惑。但是试试这个:https://jsfiddle.net/3dqnc1wa/1/
j查询:
$("document").ready(function() {
var imageWidth = $("img").width();
var imageHeight = $("img").height();
$("#dims").html("Width: " + imageWidth + " x Height: " + imageHeight)
if(imageWidth >= 400 && imageHeight >= 200) {
$("#test").html("It's equal to or wider than 400px and equal to or higher than 200px");
} else if(imageWidth <= 399 && imageHeight <= 199) {
$("#test").html("It's smaller than or equal to 399px wide and shorter than of equal to 199px");
}
;});
.HTML:
<img src="http://placehold.it/350x150">
<div id="dims">
</div>
<div id="test">
</div>
我使用了.width()
和.height()
并将它们存储在变量(imageWidth
/imageHeight
(中,然后用一些条件检查它们。
你需要为 img 编写一个小的 onload 函数,以获得图像的宽度和高度,然后你可以相应地操作它。
var reader = new FileReader();
var img = new Image();
reader.addEventListener("load", function () {
preview.src = reader.result;
img.src=reader.result;
}, false);
reader.readAsDataURL(file);
img.onload = function() {
//alert(this.width + 'x' + this.height);
image.width=this.width;
image.height=this.height;
}
宽度是图像的宽度,这个.高度是高度。AFter u 获取图像的高度和宽度,将其存储在图像 json 中,并将它们与最大高度和最大宽度、最小高度和最小宽度进行比较。
这是小提琴https://jsfiddle.net/AnonymousKB07/kn0h5tm2/3/希望这有帮助。
相关文章:
- 如果宽度是百分比,如何设置以px为单位的图像高度
- 根据图像高度添加类
- 尝试使用window.innerHeight和Javascript设置图像高度
- 图像高度只会从一大组图像中检索一次
- 为什么我的图像高度没有改变
- 使图像高度相同并定义共享的总宽度
- 在提交表单之前获取上传图像的图像高度和宽度
- Javascript:在 for 循环中编辑图像高度
- 如何使用 JQuery 获取真实的图像高度
- 根据原始图像高度使用 Photoshop 和 JavaScript 调整条件图像大小
- 基于移动方向的图像高度
- 我如何使用 Jquery 获取图像高度并将其除以 2
- 图像高度与图像宽度成比例,但图像宽度以父项的百分比为单位
- 使用 jQuery 调整图像高度
- 获取图像高度并将图像容器高度更改为自动
- 图像高度始终返回为0
- 获取不在内容中的图像高度
- 调整主图像高度的Nivo滑块
- 如何使用变量更改图像高度
- 获取图像高度属性并将其显示在CSS转换中