web-dev-qa-db-fra.com

Obtenir la taille du fichier, la largeur et la hauteur de l'image avant le téléchargement

Comment puis-je obtenir la taille du fichier, la hauteur et la largeur de l'image avant de les télécharger sur mon site Web, avec jQuery ou JavaScript?

javascriptjqueryhtmldimensionsimage-size
92
Afshin

Plusieurs images téléchargées avec aperçu des données d'informations

Utilisation de HTML5 et de la API de fichier

Exemple utilisant RL API

Les images sources seront un RL représentant l'objet Blob
<img src="blob:null/026cceb9-edr4-4281-babb-b56cbf759a3d">

const EL_browse  = document.getElementById('browse');
const EL_preview = document.getElementById('preview');

const readImage  = file => {
  if ( !(/^image\/(png|jpe?g|gif)$/).test(file.type) )
    return EL_preview.insertAdjacentHTML('beforeend', `Unsupported format ${file.type}: ${file.name}<br>`);

  const img = new Image();
  img.addEventListener('load', () => {
    EL_preview.appendChild(img);
    EL_preview.insertAdjacentHTML('beforeend', `<div>${file.name} ${img.width}×${img.height} ${file.type} ${Math.round(file.size/1024)}KB<div>`);
    window.URL.revokeObjectURL(img.src); // Free some memory
  });
  img.src = window.URL.createObjectURL(file);
}

EL_browse.addEventListener('change', ev => {
  EL_preview.innerHTML = ''; // Remove old images and data
  const files = ev.target.files;
  if (!files || !files[0]) return alert('File upload not supported');
  [...files].forEach( readImage );
});
#preview img { max-height: 100px; }
<input id="browse" type="file" multiple>
<div id="preview"></div>

Exemple utilisant API FileReader

Au cas où vous auriez besoin de sources d'images sous forme de longues chaînes de données codées Base64
<img src="data:image/png;base64,iVBORw0KGg... ...lF/++TkSuQmCC=">

const EL_browse  = document.getElementById('browse');
const EL_preview = document.getElementById('preview');

const readImage = file => {
  if ( !(/^image\/(png|jpe?g|gif)$/).test(file.type) )
    return EL_preview.insertAdjacentHTML('beforeend', `<div>Unsupported format ${file.type}: ${file.name}</div>`);

  const reader = new FileReader();
  reader.addEventListener('load', () => {
    const img  = new Image();
    img.addEventListener('load', () => {
      EL_preview.appendChild(img);
      EL_preview.insertAdjacentHTML('beforeend', `<div>${file.name} ${img.width}×${img.height} ${file.type} ${Math.round(file.size/1024)}KB</div>`);
    });
    img.src = reader.result;
  });
  reader.readAsDataURL(file);  
};

EL_browse.addEventListener('change', ev => {
  EL_preview.innerHTML = ''; // Clear Preview
  const files = ev.target.files;
  if (!files || !files[0]) return alert('File upload not supported');
  [...files].forEach( readImage );
});
#preview img { max-height: 100px; }
<input id="browse" type="file"  multiple>
<div id="preview"></div>
169
Roko C. Buljan

Si vous pouvez utiliser le plugin de validation jQuery, vous pouvez le faire comme suit:

Html: 

<input type="file" name="photo" id="photoInput" />

JavaScript: 

$.validator.addMethod('imagedim', function(value, element, param) {
  var _URL = window.URL;
        var  img;
        if ((element = this.files[0])) {
            img = new Image();
            img.onload = function () {
                console.log("Width:" + this.width + "   Height: " + this.height);//this will give you image width and height and you can easily validate here....

                return this.width >= param
            };
            img.src = _URL.createObjectURL(element);
        }
});

La fonction est passée en tant que fonction ab onload.

Le code est pris de ici

7
Jozífek Chramršt

démo

Pas sûr que ce soit ce que vous voulez, mais juste un exemple simple:

var input = document.getElementById('input');

input.addEventListener("change", function() {
    var file  = this.files[0];
    var img = new Image();

    img.onload = function() {
        var sizes = {
            width:this.width,
            height: this.height
        };
        URL.revokeObjectURL(this.src);

        console.log('onload: sizes', sizes);
        console.log('onload: this', this);
    }

    var objectURL = URL.createObjectURL(file);

    console.log('change: file', file);
    console.log('change: objectURL', objectURL);
    img.src = objectURL;
});
4
WebBrother

Voici un exemple pur en JavaScript consistant à sélectionner un fichier image, à l'afficher, à parcourir en boucle les propriétés de l'image, puis à redimensionner l'image du canevas en une balise IMG et à définir explicitement le type d'image redimensionné sur jpeg.

Si vous cliquez avec le bouton droit sur l'image du haut, dans la balise canvas et que vous choisissez Enregistrer le fichier sous, le format PNG sera utilisé par défaut. Si vous cliquez avec le bouton droit de la souris et enregistrez le fichier en tant qu'image inférieure, le format JPEG sera par défaut. Tout fichier dont la largeur dépasse 400 pixels est réduit à 400 pixels et sa hauteur est proportionnelle au fichier d'origine.

HTML

<form class='frmUpload'>
  <input name="picOneUpload" type="file" accept="image/*" onchange="picUpload(this.files[0])" >
</form>

<canvas id="cnvsForFormat" width="400" height="266" style="border:1px solid #c3c3c3"></canvas>
<div id='allImgProperties' style="display:inline"></div>

<div id='imgTwoForJPG'></div>

SCÉNARIO

<script>

window.picUpload = function(frmData) {
  console.log("picUpload ran: " + frmData);

var allObjtProperties = '';
for (objProprty in frmData) {
    console.log(objProprty + " : " + frmData[objProprty]);
    allObjtProperties = allObjtProperties + "<span>" + objProprty + ": " + frmData[objProprty] + ", </span>";
};

document.getElementById('allImgProperties').innerHTML = allObjtProperties;

var cnvs=document.getElementById("cnvsForFormat");
console.log("cnvs: " + cnvs);
var ctx=cnvs.getContext("2d");

var img = new Image;
img.src = URL.createObjectURL(frmData);

console.log('img: ' + img);

img.onload = function() {
  var picWidth = this.width;
  var picHeight = this.height;

  var wdthHghtRatio = picHeight/picWidth;
  console.log('wdthHghtRatio: ' + wdthHghtRatio);

  if (Number(picWidth) > 400) {
    var newHeight = Math.round(Number(400) * wdthHghtRatio);
  } else {
    return false;
  };

    document.getElementById('cnvsForFormat').height = newHeight;
    console.log('width: 400  h: ' + newHeight);
    //You must change the width and height settings in order to decrease the image size, but
    //it needs to be proportional to the original dimensions.
    console.log('This is BEFORE the DRAW IMAGE');
    ctx.drawImage(img,0,0, 400, newHeight);

    console.log('THIS IS AFTER THE DRAW IMAGE!');

    //Even if original image is jpeg, getting data out of the canvas will default to png if not specified
    var canvasToDtaUrl = cnvs.toDataURL("image/jpeg");
    //The type and size of the image in this new IMG tag will be JPEG, and possibly much smaller in size
    document.getElementById('imgTwoForJPG').innerHTML = "<img src='" + canvasToDtaUrl + "'>";
};
};

</script>

Voici un jsFiddle:

jsFiddle Choisir, afficher, obtenir les propriétés et redimensionner un fichier image

Dans jsFiddle, un clic droit sur l'image du haut, qui est un canevas, ne vous donnera pas les mêmes options de sauvegarde que sur un clic droit sur l'image du bas dans une balise IMG.

2
Alan Wells

J'ai donc commencé à expérimenter les différentes fonctionnalités de l'API FileReader et j'ai pu créer une balise IMG avec une URL DATA.

Inconvénient: cela ne fonctionne pas sur les téléphones mobiles, mais sur Google Chrome.

$('input').change(function() {
    
    var fr = new FileReader;
    
    fr.onload = function() {
        var img = new Image;
        
        img.onload = function() { 
//I loaded the image and have complete control over all attributes, like width and src, which is the purpose of filereader.
            $.ajax({url: img.src, async: false, success: function(result){
                        $("#result").html("READING IMAGE, PLEASE WAIT...")
                        $("#result").html("<img src='" + img.src + "' />");
                console.log("Finished reading Image");
                        }});
        };
        
        img.src = fr.result;
    };
    
    fr.readAsDataURL(this.files[0]);
    
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" accept="image/*" capture="camera">
<div id='result'>Please choose a file to view it. <br/>(Tested successfully on Chrome - 100% SUCCESS RATE)</div>

(voir ceci sur un jsfiddle à http://jsfiddle.net/eD2Ez/530/ )
(voir le jsfiddle original que j’ai ajouté à à http://jsfiddle.net/eD2Ez/ )

1
Stardust

Autant que je sache, il n’est pas facile de le faire, car Javascript/JQuery n’a pas accès au système de fichiers local. Le HTML 5 contient de nouvelles fonctionnalités qui vous permettent de vérifier certaines métadonnées telles que la taille du fichier, mais je ne suis pas sûr que vous puissiez obtenir les dimensions de l'image.

Voici un article que j'ai trouvé concernant les fonctionnalités html 5 et une solution de contournement pour IE impliquant l'utilisation d'un contrôle ActiveX. http://jquerybyexample.blogspot.com/2012/03/how-to-check-file-size-before-uploading.html

0
Russell Durham

Un exemple de validation jQuery actif:

   $(function () {
        $('input[type=file]').on('change', function() {
            var $el = $(this);
            var files = this.files;
            var image = new Image();
            image.onload = function() {
                $el
                    .attr('data-upload-width', this.naturalWidth)
                    .attr('data-upload-height', this.naturalHeight);
            }

            image.src = URL.createObjectURL(files[0]);
        });

        jQuery.validator.unobtrusive.adapters.add('imageminwidth', ['imageminwidth'], function (options) {
            var params = {
                imageminwidth: options.params.imageminwidth.split(',')
            };

            options.rules['imageminwidth'] = params;
            if (options.message) {
                options.messages['imageminwidth'] = options.message;
            }
        });

        jQuery.validator.addMethod("imageminwidth", function (value, element, param) {
            var $el = $(element);
            if(!element.files && element.files[0]) return true;
            return parseInt($el.attr('data-upload-width')) >=  parseInt(param["imageminwidth"][0]);
        });

    } (jQuery));
0
jenson-button-event