Affichage de la toile de l'image d'une toile à l'autre de la toile à l'aide de base64

E. g. var new = canvas.toDataURL("image/png");

Je veux le base64 qui est présent dans cette nouvelle variable à afficher en 2ème toile élément qui est présent. Mais il n'affiche pas le base64 image en utilisant la méthode drawimage.
Il fonctionne si j'utilise disent image.png

InformationsquelleAutor Nitesh | 2010-11-09
  1. 9

    Vous ne devriez pas utiliser base64 pour copier la toile. Vous pouvez passer à la source de la toile dans la destination toile contexte de la méthode drawImage.

    Sinon vous allez souffrir d'une grave dégradation des performances. Voir mon jsperf test à http://jsperf.com/copying-a-canvas-element.

    drawImage() d'accepter un Canvas ainsi que d'une Image objet.

    Essayez ceci:

    //grab the context from your destination canvas
var destCtx = destinationCanvas.getContext('2d');

//call its drawImage() function passing it the source canvas directly
destCtx.drawImage(sourceCanvas, 0, 0);
    InformationsquelleAutor Robert Hurst
  2. 3

    1. D'abord créer un Élément de l'Image & donner la source de l'Image comme la mise en cache .DataURL() source

    2. À l'aide de l'Image <img /> (que nous avons créé précédemment) dessiner le Contenu de l'Image sur le second élément Canvas

    E. g.:

    window.onload = function() { 
    var canvas1 = document.getElementById('canvas1');
    var canvas2 = document.getElementById('canvas2');
    var ctx1    = canvas1.getContext('2d');
    var ctx2    = canvas2.getContext('2d');

    var src     = canvas.toDataURL("image/png"); //cache the image data source

    var img     = document.createElement('img'); //create a Image Element
    img.src     = src;   //image source

    ctx2.drawImage(img, 0, 0);  //drawing image onto second canvas element
};
    • Cela fonctionne, mais c'est un peu un tour sur chemin de la copie de la toile. Au lieu de créer une image comme un moyen de copier les données, vous pouvez tout simplement passer à la source de la toile à la .méthode drawImage au lieu d'une image temporaire de l'objet.
    • veuillez lire la question correctement .. op mentionné que I want the base64 that is present in this new variable to be displayed into 2nd canvas element that is present ..
    • Pourquoi? Si l'on veut copier l'image sur une autre toile, ils doivent le faire directement. À l'aide de données base64 comme une méthode est incroyablement lent. jsperf.com/copying-a-canvas-element
    • accepté votre point & aussi upvoted votre réponse .. 🙂
    InformationsquelleAutor