Je travaille sur ce code dont l'objectif est de : vérifier si c'est un PNG, vérifier si c'est 256X256, et transformer img en base64 pour le télécharger sur le serveur.

Donc si je sélectionne un img 256 x 256 c'est des charges mais, si je charge un autre img qui n'est pas un 256 x 256 après avoir sélectionné un 256 x 256 c'est des charges et je ne sais pas pourquoi ! Vidéo diffusée Comment puis-je le résoudre?

function isFileImage(file) {
    const acceptedImageTypes = ['image/png'];

    return file && acceptedImageTypes.includes(file['type'])
}



function importFileandPreview() {
  var preview = document.querySelector('img');
  var file    = document.querySelector('input[type=file]').files[0];
  var reader  = new FileReader();

  if (file) {
    //read img
    reader.readAsDataURL(file);
    //verify type
    var text = file.type;
    if (text === "image/png") {
      //load img
      reader.addEventListener("load", function () {
        //put img on <img> src
        //console logs
        //console.log(preview);
        //console.log("pre_nat_height:"+preview.naturalHeight);
      // console.log("pre_nat_width:"+preview.naturalWidth);
       //technically check if img is 256 x 256
       var old = preview.src;
       preview.src = reader.result;
        if(preview.naturalHeight === 256 && preview.naturalWidth === 256){
          //create a hidden input (works but value is not from last img)
          var element = document.getElementById("imga");
            if(typeof(element) != 'undefined' && element != null){
            document.getElementById("imga").remove();
          }
            input = document.createElement('input');
            input.setAttribute("type","hidden");
            input.setAttribute("id","imga");
            input.setAttribute("name","img")
            input.setAttribute("value",preview.src);
            document.getElementById('count').appendChild(input);

            delete preview;
        }
        //else if img is not 256 x 256
        else {
          preview.src = old;
          alert("Must be a PNG and have 256px X 256px!");
          delete preview;
        }
      }, false);// i don't know why false but ye
    }
  }
}
<input type="file" id="file" accept="image/PNG" onchange="importFileandPreview()"><br>
<img src=" data:image/png;base64,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" height="256" width="256">
<form id="count">
</form>
0
Victor 30 oct. 2020 à 01:01

1 réponse

Meilleure réponse

tl;dr : Vous devez effectuer la vérification par rapport aux dimensions naturelles de l'image à l'intérieur du gestionnaire pour l'événement load de l'aperçu.


Le problème auquel vous êtes confronté est une conséquence d'un mauvais timing plutôt que d'une mauvaise logique. Plus précisément, cela réside dans le fait que vous définissez le nouveau src de votre aperçu, puis vérifiez les dimensions naturelles de l'image chargée de manière synchrone.

Cette approche est erronée car une image se charge de manière asynchrone et, par conséquent, votre code n'attend pas qu'elle se charge avant de procéder à votre vérification. Par conséquent, lorsque, après avoir sélectionné une image valide, vous en sélectionnez une non valide, vous vérifiez toujours les dimensions de la première car la dernière n'a pas encore été chargée.

Pour corriger cette erreur, vous devez effectuer votre vérification dans le gestionnaire pour l'événement load de l'aperçu, comme indiqué ci-dessous.

Extrait de travail:

(J'ai réécrit la fonction pour la rendre plus facile à lire)

function isFileImage (file) {
    const acceptedImageTypes = ["image/png"];
    return file && acceptedImageTypes.includes(file["type"])
}

function importFileandPreview () {
    var preview = document.querySelector("img");
    var file    = document.querySelector("input[type=file]").files[0];
    var reader  = new FileReader();

    /* Terminate the function prematurely if the file isn't an image. */
    if (!isFileImage(file)) return;

    /* Load the file into the reader. */
    reader.readAsDataURL(file);

    /* Set the 'load' event of the reader. */
    reader.addEventListener("load", function () {
        /* Create a temporary image to use for the check to avoid flashing. */
        var tempPreview = new Image();

        /* Set the 'load' event of the temporary preview. */
        tempPreview.addEventListener("load", function () {
            /* Check whether the selected image isn't 256x256 pixels. */
            if (this.naturalHeight != 256 || this.naturalWidth != 256) {
                /* Alert the user. */
                alert("Must be a PNG and have 256px X 256px!");

                /* Restore the default src to the preview. */
                preview.src = preview.dataset.defaultSrc;

                /* Terminate the function prematurely. */
                return;
            }

            /* Set the result of the reader as the source of the preview. */
            preview.src = reader.result;

            /* Save the image to the form. */
            saveImageToInput(reader.result);
        });

        /* Set the result of the reader as the source of the image. */
        tempPreview.src = reader.result;
    });

    /* Save the default image in a data-* attribute to use again if needed. */
    preview.dataset.defaultSrc = preview.dataset.defaultSrc || preview.src;
}


function saveImageToInput (image) {
    /* Find the hidden input. */
    var input = document.getElementById("imga");

    /* Check whether the input doesn't exist. */
    if (!input) {
        /* Create a new hidden input. */
        input = document.createElement("input");
        input.setAttribute("id", "imga");
        input.setAttribute("name", "img");
        input.setAttribute("type", "hidden");

        /* Place the input in the form. */
        document.getElementById("count").appendChild(input);
    }

    /* Save the image as the input's value. */
    input.setAttribute("value", image);
}
<input type="file" id="file" accept="image/PNG" onchange="importFileandPreview()"><br>
<img src=" data:image/png;base64,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" height="256" width="256">
<form id="count">
</form>

Remarques:

  1. C'est une bonne idée d'utiliser un aperçu temporaire pour vérifier si l'image sélectionnée répond à vos critères car, si vous la chargez dans l'aperçu visible puis alertez l'utilisateur, l'image chargée s'affichera.
  2. delete preview : Ne faites pas ça. Les variables en JavaScript ne sont pas censées être supprimées comme ça.
  3. Le troisième argument passé à addEventListener détermine si l'événement est capturé dans la phase de bullage ou de capture. Par défaut, c'est false, vous pouvez donc l'omettre.
0
Angel Politis 31 oct. 2020 à 00:44