canvas d'html5: Conversion de fichier de l'Image DataURL jette Uncaught TypeError

Je vais essayer d'obtenir le Base64/Données de l'URL d'un fichier d'image en Javascript. L'utilisateur fondamentalement sélectionne une image via le Fichier de contrôle d'Entrée et les Données de l'URL est générée. Cependant, j'ai cette erreur:

Uncaught TypeError: Échec de l'exécution de 'drawImage' sur
'CanvasRenderingContext2D': La valeur fournie n'est pas de type
'(HTMLImageElement ou HTMLVideoElement ou HTMLCanvasElement ou
ImageBitmap)'

HTML:

<body>
    <form id="form1">
    <div>
        <input type="file" id="imageinput" onchange="testit(event)" />
        <canvas width="300" height="300" id="mycanvas" style="display: none;"></canvas>
    </div>
    </form>
</body>

Javascript:

function testit(event) {

            var myImage = URL.createObjectURL(event.target.files[0]);

            var myCanvas = document.getElementById('mycanvas');

            var ctx = myCanvas.getContext('2d');

            ctx.drawImage(myImage, 0, 0);

            var mydataURL = myCanvas.toDataURL('image/jpg');

            alert(mydataURL);

        }

Pourquoi n'est-ce pas le code de travail, les gars?

  • vous avez besoin de mettre l'url sur une balise img src puis passer l'img à la toile pour attirer, une fois chargé.
InformationsquelleAutor Dinuka | 2015-10-08
  1. 7

    Vous ne pouvez pas dessiner une image à partir de l'url directement sur la toile. Vous devez créer un élément de l'image ou de l'objet pour le faire.

    var myCanvas = document.getElementById('mycanvas');
var ctx = myCanvas.getContext('2d');
var img = new Image();
img.onload = function(){
    ctx.drawImage(img, 0, 0);

    alert(myCanvas.toDataURL('image/jpeg'));
};

img.src = URL.createObjectURL(event.target.files[0]);

    Ici, nous avons créé un image objet et de définir la src à l'utilisateur sélectionné url de l'image. Après l'image est chargée, nous sommes en l'ajoutant à la toile.

    EDIT:

    Ici, nous avons un problème de plus. Quelle que soit la taille de l'image, vous obtiendrez toujours 300x300 recadrée dataurl de l'image à cause de la statique de la toile de largeur et de hauteur. Nous pouvons donc définir la largeur et la hauteur de la toile de manière dynamique une fois l'image chargée. Nous pouvons utiliser console.log() au lieu de alert() de sorte que vous pouvez ouvrir et de voir l'image à partir de votre console dans votre navigateur lui-même.

    myCanvas.width = img.width;
myCanvas.height = img.height;

    Voici le code final:

    var myCanvas = document.getElementById('mycanvas');
var ctx = myCanvas.getContext('2d');
var img = new Image();
img.onload = function(){
    myCanvas.width = img.width;
    myCanvas.height = img.height;

    ctx.drawImage(img, 0, 0);

    console.log(myCanvas.toDataURL('image/jpeg'));
};

img.src = URL.createObjectURL(event.target.files[0]);

    Ici est le violon (j'ai fait de la toile visible de sorte que vous pouvez voir l'ensemble de l'image et de la largeur et de la hauteur de changement dans la toile):

    Mise à JOUR:

    Comme @Kaiido mentionné, Il va produire des images PNG depuis le 'image/jpg' est pas le type mime. 'image/jpeg' est le type mime pour les fichiers JPG et JPEG images.

    Mis À Jour Le Violon:

    http://jsfiddle.net/k7moorthi/r8soo95p/4/

    • Votre code fonctionne bien sur le violon. Cependant, quand j'ai ajouté à l'en-tête à l'intérieur d'un <script> tag, je n'obtiens aucun résultat. Aucune alerte soit. Pas d'erreurs non plus. J'ai inclus la <script src="ajax.googleapis.com/ajax/libs/jquery/1.11.3/...> le script. Pourquoi est-ce?
    • Pas besoin de jquery. Je l'ai ajouté dans le violon pour la facilité d'utilisation. Vous pouvez le faire avec javascript normale elle-même. Dans votre code, il suffit de remplacer le corps de la fonction avec le code final dans ma réponse est partie édition. Pour voir le résultat, allez à votre navigateur de la console.
    • Des œuvres. Merci de prendre le temps de s'accoupler! Très utile!
    • Le bon paramètre pour obtenir une version JPEG de toDataURL() est "image/jpeg". Une OP et votre code n'est pas valide et sera de retour au format png.
    • Merci @Kaiido, mise à jour de la réponse!
    InformationsquelleAutor Kesavamoorthi
  2. 4

    Vous essayez de dessiner un objet URL de la toile. vous devez créer une image dans la mémoire de la première

    http://jsfiddle.net/zmtu6t6c/4/

    var myImageUrl = URL.createObjectURL(event.target.files[0]);
var myImage = new Image();
myImage.src = myImageUrl;

myImage.onload = function(){

... then do the canvas stuff

}
    • attendre pour charger l'événement n'est pas nécessaire ?
    • non, pas besoin. l'ajout de violon
    • Pour moi le résultat est un carré blanc 300*300
    • mon erreur, on dirait que vous êtes correct
    • La nouvelle édition de doesnt work mate
    InformationsquelleAutor dave.mcalpine