Comment Copier le Contenu d'une Toile à Une Autre Toile Localement

Je voudrais copier TOUT le contenu d'une toile et de les transférer à l'autre sur le côté client. Je pense que je voudrais utiliser le canvas.toDataURL() et context.drawImage() méthode à mettre en œuvre, mais je suis en cours d'exécution dans un certain nombre de questions.

Ma solution serait d'obtenir Canvas.toDataURL() et les stocker dans un objet Image en Javascript, et ensuite utiliser le context.drawImage() méthode pour le replacer.

Cependant, je crois que le toDataURL méthode retourne un 64 bits étiquette codée avec "data:image/png;base64," ajouté à elle. Cela ne semble pas être une étiquette valide (je pourrais toujours utiliser des RegEx pour supprimer ce), mais est-ce que 64 bits codés chaîne APRÈS le "data:image/png;base64," sous-chaîne d'une image valide? Je peux dire image.src=iVBORw...ASASDAS, et d'en tirer le retour sur la toile?

J'ai regardé certaines questions connexes:
Affichage de la toile de l'image d'une toile à l'autre de la toile à l'aide de base64

Mais les solutions ne semblent pas être correct.

InformationsquelleAutor J Kao | 2010-12-10
  1. 237

    En fait, vous n'avez pas à créer une image du tout. drawImage() d'accepter un Canvas ainsi que d'une Image objet.

    //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);

    Façon plus rapide que d'utiliser un ImageData objet ou Image élément.

    Noter que sourceCanvas peut être un HTMLImageElement, HTMLVideoElement, ou un HTMLCanvasElement. Comme mentionné par Dave dans un commentaire en dessous de cette réponse, vous ne peut pas utiliser une toile contexte de dessin comme source. Si vous avez une toile contexte de dessin à la place de l'élément canvas, il a été créé, il y a une référence à l'original de l'élément canvas sur le contexte dans context.canvas.

    Ici est un jsPerf de démontrer pourquoi c'est la seule bonne façon de cloner une toile: http://jsperf.com/copying-a-canvas-element

    • un petit point qui s'est déclenché moi: alors que vous pouvez dessiner une toile (HTMLCanvasElement), vous pas tirage au sort d'un contexte (CanvasRenderingContext2D). Utilisation myContext.canvas à la place.
    • le commentaire est un FAUT LIRE... woud donne +10 si possible ;). @Robert-Hurst doit compléter sa réponse à ce commentaire, car il ne précise pas d'où source canvas vient de...
    • Pourriez-vous nous donner un exemple ?
    • En fait, la toile ne doit pas être visible. Ceci est démontré là => jsfiddle.net/d36wwtvj
    • Fonctionne parfaitement. J'ai même essayé d'utiliser avec plusieurs canevas.
    • Parfait et très rapide de la solution. Merci.

    InformationsquelleAutor Robert Hurst
  2. -1

    @robert-hurst a un nettoyeur approche, mais cette solution peut être utilisée dans des endroits où vous avez réellement envie d'avoir une copie des Données de l'Url après la copie. Exemples: lorsque vous créez un site web qui utilise beaucoup de l'image/canevas des opérations.

        //select canvas elements
    var sourceCanvas = document.getElementsById("some-unique-id");
    var destCanvas = document.getElementsByClassName("some-class-selector")[0];

    //copy canvas by DataUrl
    var sourceImageData = sourceCanvas.toDataURL("image/png");
    var destCanvasContext = destCanvas.getContext('2d');

    var destinationImage = new Image;
    destinationImage.onload = function(){
      destCanvasContext.drawImage(destinationImage,0,0);
    };
    destinationImage.src = sourceImageData;
    InformationsquelleAutor vishwarajanand
  3. -6

    J'ai réussi à faire fonctionner tout ça, ce que j'ai fait semble correct:

    testImage = new testImage();
testImage.src = data:image/png;base64,iVBORw0KG......kSZIkSZIkSZI0u/1/diDteJCiN80AAAAASUVORK5CYII=

    (URL ci-dessus est un exemple)

    context.drawImage(testImg,0,0);

    Cela semble fonctionner lorsque je l'exécute sur la console de Chrome et de FireBug

    • Cela fonctionne mais sa crufty et pas le meilleur préformage façon de le faire.
    • C'était exactement ce dont j'avais besoin tho! Merci!
    InformationsquelleAutor J Kao