Javascript判断图片尺寸大小实例分析

下面我们来详细讲解一下“Javascript判断图片尺寸大小实例分析”的完整攻略。

前言

在网页中，我们经常会用到图片。而有些时候，为了网页的美观和用户的体验，我们需要对图片的尺寸大小进行限制。如果图片过大，可能会导致网页加载过慢，影响用户的使用体验。那么如何利用JavaScript判断图片尺寸大小呢？下面我们将详细讲解。

确定图片尺寸的方法

JavaScript中可以通过Image对象来确定图片的尺寸大小，具体方法如下：

var img = new Image();
img.onload = function(){
    alert("图片宽度为：" + img.width + "，高度为：" + img.height);
};
img.src = "img.jpg";

以上代码中，我们先定义了一个Image对象，并指定其src属性为我们需要判断的图片地址。然后给该对象绑定了一个onload事件，当该图片加载完成时，就会触发该事件，执行事件处理函数中的代码。在事件处理函数中，我们可以通过img.width和img.height属性来获取图片的宽度和高度。

确定图片大小的方法

在确定了图片的尺寸后，我们还需要确定该图片的大小，通常使用图片文件的大小来表示。我们可以通过以下方法来获取图片文件的大小：

var img = new Image();
img.onload = function(){
    var fileSize = img.src.length;
    alert("图片大小为：" + fileSize + "字节");
};
img.src = "img.jpg";

以上代码中，我们依然是使用Image对象来加载图片，并在图片加载完成后触发处理函数。图片的大小可以通过其src属性的长度来获取。这里需要注意，该方式只是获取了图片文件的大小，而并非获取了图片在网页中实际占用的大小。

示例说明

示例1-判断图片是否超过了固定大小

以下代码实现了判断图片是否超过了固定大小，并将超过大小的提示信息弹出：

var img = new Image();
img.onload = function(){
    var maxSize = 1024 * 1024; // 设置最大值为1MB
    var fileSize = img.src.length;
    if(fileSize > maxSize){
        alert("您选择的图片过大，请选择小于1MB的图片");
    }
};
img.src = "img.jpg";

以上代码中，我们定义了一个最大值为1MB的变量maxSize，并通过Image对象来获取了图片的文件大小fileSize。若fileSize超出了maxSize，则弹出提示信息。

示例2-限制图片的最大宽度和高度

以下代码实现了限制图片的最大宽度和高度，并在图片大小超过限制时，自动压缩图片：

var img = new Image();
img.onload = function(){
    var maxWidth = 500; // 设置最大宽度为500px
    var maxHeight = 500; // 设置最大高度为500px
    var width = img.width;
    var height = img.height;
    if(width > maxWidth || height > maxHeight){
        // 如果宽度或高度超过限制，则进行等比例压缩
        if (width > height) {
            // 宽度比高度大，按照宽度为500px的比例压缩
            height *= maxWidth / width;
            width = maxWidth;
        } else {
            // 高度比宽度大，按照高度为500px的比例压缩
            width *= maxHeight / height;
            height = maxHeight;
        }
        // 压缩图片并显示
        var canvas = document.createElement("canvas");
        var ctx = canvas.getContext("2d");
        canvas.width = width;
        canvas.height = height;
        ctx.drawImage(img, 0, 0, width, height);
        document.body.appendChild(canvas);
    } else {
        // 如果没有超过限制，则直接显示原图
        document.body.appendChild(img);
    }
};
img.src = "img.jpg";

以上代码中，我们定义了最大宽度和最大高度的变量maxWidth和maxHeight，并通过Image对象获取了图片的实际宽度和高度。若宽度或高度超过了限制，则进行等比例压缩，压缩后的图片以canvas元素的形式显示在页面上。否则直接显示原图片。

阅读剩余 51%