J'essaie de redimensionner une entrée utilisateur à l'aide de Javascript. Je suis capable d'aller droit à presque la dernière partie.

  1. Je prends l'image d'entrée de l'utilisateur
  2. Je crée une nouvelle image avec le même src que l'image d'entrée
  3. Je redimensionne la nouvelle image
  4. Je montre une petite vignette d'aperçu à l'utilisateur
  5. Jusqu'à présent, tout a fonctionné ... Maintenant, la dernière partie qui n'a pas fonctionné
  6. Je change le input.result = new_resized_image.src

Ci-dessous le message d'erreur que je reçois

enter image description here

Ci-dessous le code

document.addEventListener("DOMContentLoaded", function(event) {
   console.log("DOM fully loaded and parsed");

        const file_input = document.getElementById('main_image');
        file_input.addEventListener('change', function (e) {
        const file = file_input.files[0];
        const reader = new FileReader();
        reader.onload = function () {
            if (!file.name.match(/.(jpg|jpeg|png|gif)$/i)){
                alert('Only jpg, jpeg, png, gif accepted at the moment');
                file_input.value = "";
            }
            if (file.size <= (1024*1024)){
                const img = new Image();
                img.src = reader.result;
                console.log("Small Image Width " + img.width);
                console.log( "Small Image Height " + img.height);
                const preview_image = document.getElementById("preview");
                preview_image.src = img.src;
                console.log("Thumbnail Image height " + preview_image.height);
                console.log("Thumbnail Image width " + preview_image.width);
            }
            else {
                const img = new Image();
                img.src = reader.result;
                const preview_image = document.getElementById("preview");
                const MAX_WIDTH = 1024;
                const MAX_HEIGHT = 1024;

                img.onload = function(){
                    console.log(img.width);
                    console.log(img.height);
                    let width = img.width;
                    let height = img.height;

                    if (width > height){
                        if (width > MAX_WIDTH){
                            height *= MAX_WIDTH / width;
                            width = MAX_WIDTH;
                        }
                    }else {
                        if (height > MAX_HEIGHT){
                            width *= MAX_HEIGHT / height;
                            height = MAX_HEIGHT
                        }
                    }
                    const canvas = document.createElement("canvas");
                    canvas.width = width;
                    canvas.height = height;
                    canvas.getContext("2d").drawImage(img, 0, 0, width, height);
                    const new_image = document.getElementById("new_image");
                    new_image.src = canvas.toDataURL('image/jpeg');
                    new_image.onload = function(){
                      console.log(this.width);
                      console.log(this.height);
                    };


                    preview_image.src = new_image.src;
                    file_input.value = new_image.src;

                };
0
Samir Tendulkar 7 mars 2019 à 04:23

2 réponses

Meilleure réponse

Il est toujours possible de convertir les données en base64 et de coller cela dans un <input> ou <textarea> caché si vous voulez renvoyer l'image au serveur lorsque le client soumet le formulaire.

Ensuite, vous pouvez toujours avoir un bouton qui ressemble à un bouton "Parcourir" si vous pensez qu'il est important de l'avoir dans votre formulaire.

Vous pouvez également utiliser jQuery.ajax() ou fetch() pour envoyer le base64 ou un autre type de données à votre serveur.

1
Alexis Wilke 7 mars 2019 à 04:49

Je pense que la dernière ligne devrait être

file_input.src au lieu de file_input.value

0
Prasheel 7 mars 2019 à 02:23