js如何获取图片的尺寸？

JavaScript022

js如何获取图片的尺寸？,第1张

项目的需求是上传一张图片，然后验证该图片的尺寸，如果跟预期的不符，就不给上传

首先，可以通过new FileReader()，再通过将上传的图片文件传给实例的readAsDataUrl()，当文件加载完成触发onload事件，传递event，通过event.target.result来获取图片的链接(base64格式的)

接着，new Image()实例，将上面获取的链接设置为图片的src属性，当图片加载完成触发onload事件就可以通过width、height属性来读取图片的长宽啦~~

jquery获取img宽高的操作方法和步骤如下：

1、首先，界面中有一个img，但是js不用于设置其宽度，高度和背景颜色，如下图所示。

2、其次，使用jQuery获取要设置的div，然后调用css（）方法即可开始设置，如下图所示。

3、接着，可以在css方法中设置。需要注意的是，里面有大括号，并且该属性用双引号引起来，如下图所示。

4、然后，完成上述步骤后，要同时设置多个属性，请使用逗号分隔多个属性，如下图所示。

5、随后，完成上述步骤后，打开hbuilder上方的浏览器小图标并开始预览，如下图所示。

6、最后，完成上述步骤后，观看效果，如下图所示。这样，问题就解决了。

//给你一个比较灵活的，可自由控制

jQuery(window).load(function () {

jQuery(".div1 img").each(function () {//div1下的img宽度、高度设置

DrawImage(this, 700, 470)//宽700，高470，自己改为相同即可。

})

})

function DrawImage(ImgD, FitWidth, FitHeight) {//下面是判断，可自己修改条件

var image = new Image()

image.src = ImgD.src

if (image.width > 0 && image.height > 0) {

if (image.width / image.height >= FitWidth / FitHeight) {

if (image.width > FitWidth) {

ImgD.width = FitWidth

ImgD.height = (image.height * FitWidth) / image.width

}else {

ImgD.width = image.width

ImgD.height = image.height

}

} else {

if (image.height > FitHeight) {

ImgD.height = FitHeight

ImgD.width = (image.width * FitHeight) / image.height

} else {

ImgD.width = image.width

ImgD.height = image.height

}

}

}

}