Dessin d'une image à partir de données d'URL pour une toile

Question

Comment puis-je ouvrir une image dans un Canvas ? qui est codée

Je suis l'aide de la

var strDataURI = oCanvas.toDataURL(); 

La sortie est codé en base 64 image. Comment puis-je tirer de cette image sur une toile?

Je veux utiliser l' strDataURI et de créer l'Image ? Il est poosible ?
Si sa ce n'est pas éventuellement peut-être la solution pour le chargement de l'image sur une toile ?

Answer 1

Compte tenu des données de l'URL, vous pouvez créer une image (que ce soit sur la page ou purement en JS) par la mise en au src de l'image à vos données d'URL. Par exemple:

var img = new Image;
img.src = strDataURI;

L' drawImage() méthode de HTML5 Canvas Contexte permet de copier tout ou une partie d'une image (ou de la toile, ou vidéo) sur une toile.

Vous pouvez l'utiliser comme ceci:

var myCanvas = document.getElementById('my_canvas_id');
var ctx = myCanvas.getContext('2d');
var img = new Image;
img.onload = function(){
  ctx.drawImage(img,0,0); // Or at whatever offset you like
};
img.src = strDataURI;

Edit: je l'ai déjà suggéré dans cet espace qu'il pourrait ne pas être nécessaire d'utiliser l' onload gestionnaire lorsque des données URI est impliqué. Basé sur des tests expérimentaux de cette question, il n'est pas sécuritaire de le faire. La séquence ci-dessus-créer l'image, réglez l' onload à utiliser la nouvelle image, et ensuite définir le src-est nécessaire pour certains navigateurs sûrement utiliser les résultats.

Answer 2

en javascript , utilisation de jquery pour toile de sélection d'id :

 var Canvas2 = $("#canvas2")[0];
        var Context2 = Canvas2.getContext("2d");
        var image = new Image();
        image.src = "images/eye.jpg";
        Context2.drawImage(image, 0, 0);

html5:

<canvas id="canvas2"></canvas>