Bonsoir,

Afin de conditionner la taille des photos de profils uploadées par l'utilisateur, j'ai commencer à creer un element canvas, mais les choses démarrent mal, impossible d'afficher une image à l'intérieur de ce canvas...

function test2(element)
{
    var file = element.files[0];
    var reader = new FileReader();
   
    if (file != "" && file != undefined && !file.type.match(/image.*/)){
        alert("Ceci n'est pas une image");
        element.value = "";
    }
    reader.onloadend = function(){
        
        document.getElementById("avatar").src = reader.result;
        
        var img = new Image();
        img.src = reader.result;
        var canvas = document.querySelector('#canvas');
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0);
    } 
    reader.readAsDataURL(file);
}

J'ai créé un element image 'avatar' pour tester le fonctionnement du ".src = reader.result" et aucun soucis de ce coté là l'image s'affiche correctement, mais dans le canvas, rien du tout et aucune erreur dans la console.  

Comme je viens d'y passer 4h en vain, je viens vous demander de l'aide. Merci par avance 

EDIT :

C'est bon j'ai réussi, je poste le résultat si ça peut aider un jour...

function test2(element)
{
    var file = element.files[0];
    var reader = new FileReader();
   
    if (file != "" && file != undefined && !file.type.match(/image.*/)){
        alert("Ceci n'est pas une image");
        element.value = "";
    }
    reader.onloadend = function(){
        
        document.getElementById("avatar").src = reader.result;

        var canvas = document.querySelector('#canvas');
        var ctx = canvas.getContext("2d");
        var avat = new Image();
        avat.onload = function(){
            ctx.drawImage(avat, 0, 0);
        };
        avat.src = reader.result;
    } 
    reader.readAsDataURL(file);
}

-
Edité par Scueto 15 janvier 2019 à 13:13:45

Réessaie en appelant ctx.drawImage dans la méthode onload de img :

...
var canvas = document.querySelector('#canvas');
var ctx = canvas.getContext("2d");
var img = new Image();
img.onload = function() {
  ctx.drawImage(img, 0, 0);
};
img.src = reader.result;
...

Un lien pour t'aider : https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Utilisation_d%27images