자바스크립트로 업로드 전 이미지 너비 및 높이 확인

자바스크립트로 업로드 전 이미지 너비 및 높이 확인

사용자가 이미지를 넣을 수 있는 형태의 JPS가 있습니다.

<div class="photo">
    <div>Photo (max 240x240 and 100 kb):</div>
    <input type="file" name="photo" id="photoInput" onchange="checkPhoto(this)"/>
</div>

저는 js를 썼습니다.

function checkPhoto(target) {
    if(target.files[0].type.indexOf("image") == -1) {
        document.getElementById("photoLabel").innerHTML = "File not supported";
        return false;
    }
    if(target.files[0].size > 102400) {
        document.getElementById("photoLabel").innerHTML = "Image too big (max 100kb)";
        return false;
    }
    document.getElementById("photoLabel").innerHTML = "";
    return true;
}

파일 형식과 크기를 확인하는 데는 잘 작동합니다.지금은 이미지 폭과 높이를 확인하고 싶은데 할 수가 없습니다.
나는 시도해 봤습니다.target.files[0].width하지만 이해합니다.undefined. 다른 방법들도0.
좋은 의견이라도 있나?

파일은 파일일 뿐이므로 다음과 같은 이미지를 만들어야 합니다.

var _URL = window.URL || window.webkitURL;
$("#file").change(function (e) {
    var file, img;
    if ((file = this.files[0])) {
        img = new Image();
        var objectUrl = _URL.createObjectURL(file);
        img.onload = function () {
            alert(this.width + " " + this.height);
            _URL.revokeObjectURL(objectUrl);
        };
        img.src = objectUrl;
    }
});

데모: http://jsfiddle.net/4N6D9/1/

이 기능은 일부 브라우저에서만 지원된다는 것을 알고 계실 겁니다.대부분 파이어폭스와 크롬, 지금쯤이면 오페라도 될 수 있을 겁니다.

추신: 더URL.createObjectURL()메소드가 제거되었습니다.MediaStream 인터페이스.이 방법은 2013년에 더 이상 사용되지 않고 스트림을 다음에 할당함으로써 대체되었습니다.HTMLMediaElement.srcObject. 이전 방법은 안전성이 떨어지기 때문에 제거되었으며 다음 작업을 수행해야 합니다.URL.revokeOjbectURL()시냇물을 끝내려고요다른 사용자 에이전트는 이 기능을 더 이상 사용하지 않거나(Firefox) 제거했습니다(Safari).

자세한 사항은 여기를 참고하시기 바랍니다.

내가 보기에 당신이 요구하는 완벽한 답은

var reader = new FileReader();

//Read the contents of Image File.
reader.readAsDataURL(fileUpload.files[0]);
reader.onload = function (e) {

  //Initiate the JavaScript Image object.
  var image = new Image();

  //Set the Base64 string return from FileReader as source.
  image.src = e.target.result;

  //Validate the File Height and Width.
  image.onload = function () {
    var height = this.height;
    var width = this.width;
    if (height > 100 || width > 100) {
      alert("Height and Width must not exceed 100px.");
      return false;
    }
    alert("Uploaded image has valid Height and Width.");
    return true;
  };
};

찬성합니다.일단 사용자의 브라우저가 접근할 수 있는 곳에 업로드되면 크기를 쉽게 얻을 수 있습니다.이미지가 로드될 때까지 기다려야 하기 때문에 연결할 수 있습니다.onload에 대한 행사img.

업데이트된 예제:

// async/promise function for retrieving image dimensions for a URL
function imageSize(url) {
    const img = document.createElement("img");

    const promise = new Promise((resolve, reject) => {
      img.onload = () => {
        // Natural size is the actual image size regardless of rendering.
        // The 'normal' `width`/`height` are for the **rendered** size.
        const width  = img.naturalWidth;
        const height = img.naturalHeight; 

        // Resolve promise with the width and height
        resolve({width, height});
      };

      // Reject promise on error
      img.onerror = reject;
    });

    // Setting the source makes it start downloading and eventually call `onload`
    img.src = url;

    return promise;
}

// How to use in an async function
(async() => {
  const imageUrl = 'http://your.website.com/userUploadedImage.jpg';
  const imageDimensions = await imageSize(imageUrl);

  console.info(imageDimensions); // {width: 1337, height: 42}
})();

이전 예:

var width, height;

var img = document.createElement("img");
img.onload = function() {
    // `naturalWidth`/`naturalHeight` aren't supported on <IE9. Fallback to normal width/height
    // The natural size is the actual image size regardless of rendering.
    // The 'normal' width/height are for the **rendered** size.
    
    width  = img.naturalWidth  || img.width;
    height = img.naturalHeight || img.height; 
    
    // Do something with the width and height
}

// Setting the source makes it start downloading and eventually call `onload`
img.src = "http://your.website.com/userUploadedImage.jpg";

이것이 사이즈를 확인하는 가장 쉬운 방법입니다.

let img = new Image()
img.src = window.URL.createObjectURL(event.target.files[0])
img.onload = () => {
   alert(img.width + " " + img.height);
}

구체적인 크기를 확인합니다.100 x 100을 예제로 사용

let img = new Image()
img.src = window.URL.createObjectURL(event.target.files[0])
img.onload = () => {
   if(img.width === 100 && img.height === 100){
        alert(`Nice, image is the right size. It can be uploaded`)
        // upload logic here
        } else {
        alert(`Sorry, this image doesn't look like the size we wanted. It's 
   ${img.width} x ${img.height} but we require 100 x 100 size image.`);
   }                
}

입력유형 파일 /onchange="simg(this)"/"onchange"의 onchange 메서드에 함수를 첨부합니다.

   function validateimg(ctrl) { 
        var fileUpload = ctrl;
        var regex = new RegExp("([a-zA-Z0-9\s_\\.\-:])+(.jpg|.png|.gif)$");
        if (regex.test(fileUpload.value.toLowerCase())) {
            if (typeof (fileUpload.files) != "undefined") {
                var reader = new FileReader();
                reader.readAsDataURL(fileUpload.files[0]);
                reader.onload = function (e) {
                    var image = new Image();
                    image.src = e.target.result;
                    image.onload = function () {
                        var height = this.height;
                        var width = this.width;
                        if (height < 1100 || width < 750) {
                            alert("At least you can upload a 1100*750 photo size.");
                            return false;
                        }else{
                            alert("Uploaded image has valid Height and Width.");
                            return true;
                        }
                    };
                }
            } else {
                alert("This browser does not support HTML5.");
                return false;
            }
        } else {
            alert("Please select a valid Image file.");
            return false;
        }
    }

    const ValidateImg = (file) =>{
        let img = new Image()
        img.src = window.URL.createObjectURL(file)
        img.onload = () => {
            if(img.width === 100 && img.height ===100){
                alert("Correct size");
                return true;
            }
            alert("Incorrect size");
            return true;
        }
    }

다른 기능을 사용하고 싶다면 이것이 업로드에 가장 간단할 것 같습니다.

async function getImageDimensions(file) {
    let img = new Image();
    img.src = URL.createObjectURL(file);
    await img.decode();
    let width = img.width;
    let height = img.height;
    return {
        width,
        height,
    }
  }

쓰임새김

 const {width, height } = await getImageDimensions(file)

케냐에서 찍은 호랑이 사진을 저장하고 있다고 가정해 보겠습니다.그래서 클라우드 스토리지에 업로드한 다음 사진 정보를 저장하는 것처럼 사용할 수 있습니다.

const addImage = async (file, title, location) => {
   const { width, height } = await getImageDimensions(file)
   
   const url = await uploadToCloudStorage(file) // returns storage url

   await addToDatabase(url, width, height, title, location)
}

function validateimg(ctrl) {
    var fileUpload = $("#txtPostImg")[0];
    var regex = new RegExp("([a-zA-Z0-9\s_\\.\-:])+(.jpg|.png|.gif)$");
    if (regex.test(fileUpload.value.toLowerCase())) {
        if (typeof (fileUpload.files) != "undefined") {
            var reader = new FileReader();
            reader.readAsDataURL(fileUpload.files[0]);
            reader.onload = function (e) {
                var image = new Image();
                image.src = e.target.result;
                image.onload = function () {
                    var height = this.height;
                    var width = this.width;
                    console.log(this);
                    if ((height >= 1024 || height <= 1100) && (width >= 750 || width <= 800)) {
                        alert("Height and Width must not exceed 1100*800.");
                        return false;
                    }
                    alert("Uploaded image has valid Height and Width.");
                    return true;
                };
            }
        } else {
            alert("This browser does not support HTML5.");
            return false;
        }
    } else {
        alert("Please select a valid Image file.");
        return false;
    }
}

모든 브라우저에서 지원되는 이미지를 표시하지 않고 미리 보기 단계를 수행할 수 있습니다.다음 js 코드는 당신이 확인하는 방법을 보여줍니다.width그리고.height:

var file = e.target.files[0];
if (/\.(jpe?g|png|gif)$/i.test(file.name)) {
    var reader = new FileReader();
    reader.addEventListener("load", function () {
        var image = new Image();
        image.src = this.result as string;
        image.addEventListener('load', function () {
            console.log(`height: ${this.height}, width: ${this.width}`);
        });
                
    }, false);
            
    reader.readAsDataURL(file);
}

Mozilla 문서 기준:

그readAsDataURLmethod는 지정된 내용을 읽는 데 사용됩니다.Blob아니면File. 읽기 작업이 완료되면 readyState가 DONE이 되고 loadend가 트리거됩니다.그때는.resultattribute는 데이터를 데이터로 포함합니다. 파일의 데이터를 base64 인코딩된 문자열로 나타내는 URL입니다.

그리고 브라우저 호환성도 나열되어 있습니다.

저 같은 경우는 양식 제출을 막아야 해서 여기에 제게 도움이 된 해결책이 있습니다.

preventDefault는 폼 작업을 중지한 다음 onload 기능에서 이미지의 크기와 치수를 확인합니다.

괜찮으시다면 제출을 허락해 드립니다.

유효하지 않은 이미지로 양식을 제출하려고 하면 제출 버튼이 비활성화되므로 유효한 이미지가 입력되면 제출 버튼을 다시 활성화해야 했습니다.

const validateMaxImageFileSize = (e) => {
  e.preventDefault();
  const el = $("input[type='file']")[0];

  if (el.files && el.files[0]) {
    const file = el.files[0];

    const maxFileSize = 5242880; // 5 MB
    const maxWidth = 1920;
    const maxHeight = 1080;

    const img = new Image();
    img.src = window.URL.createObjectURL(file);
    img.onload = () => {
      if (file.type.match('image.*') && file.size > maxFileSize) {
        alert('The selected image file is too big. Please choose one that is smaller than 5 MB.');
      } else if (file.type.match('image.*') && (img.width > maxWidth || img.height > maxHeight)) {
        alert(`The selected image is too big. Please choose one with maximum dimensions of ${maxWidth}x${maxHeight}.`);
      } else {
        e.target.nodeName === 'INPUT'
          ? (e.target.form.querySelector("input[type='submit']").disabled = false)
          : e.target.submit();
      }
    };
  }
};

$('form.validate-image-size').on('submit', validateMaxImageFileSize);
$("form.validate-image-size input[type='file']").on('change', validateMaxImageFileSize);

function uploadfile(ctrl) {
    var validate = validateimg(ctrl);

    if (validate) {
        if (window.FormData !== undefined) {
            ShowLoading();
            var fileUpload = $(ctrl).get(0);
            var files = fileUpload.files;


            var fileData = new FormData();


            for (var i = 0; i < files.length; i++) {
                fileData.append(files[i].name, files[i]);
            }


            fileData.append('username', 'Wishes');

            $.ajax({
                url: 'UploadWishesFiles',
                type: "POST",
                contentType: false,
                processData: false,
                data: fileData,
                success: function(result) {
                    var id = $(ctrl).attr('id');
                    $('#' + id.replace('txt', 'hdn')).val(result);

                    $('#imgPictureEn').attr('src', '../Data/Wishes/' + result).show();

                    HideLoading();
                },
                error: function(err) {
                    alert(err.statusText);
                    HideLoading();
                }
            });
        } else {
            alert("FormData is not supported.");
        }

    }

언급URL : https://stackoverflow.com/questions/8903854/check-image-width-and-height-before-upload-with-javascript