Dibujar una imagen desde una URL de datos a un canvas

¿Cómo puedo abrir una imagen en un canvas? que está codificado

Estoy usando el

var strDataURI = oCanvas.toDataURL(); 

La salida es la imagen de la base 64 codificada. ¿Cómo puedo dibujar esta imagen en un canvas?

Quiero usar el strDataURI y crear la imagen? ¿Es poible?
Si no es así, ¿cuál puede ser la solución para cargar la imagen en un canvas?

Dado un URL de datos, puede crear una imagen (ya sea en la página o simplemente en JS) configurando el src de la imagen en su URL de datos. Por ejemplo:

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

El método drawImage() del HTML5 Canvas Context le permite copiar todo o parte de una imagen (o canvas o video) en un canvas.

Puede usarlo así:

 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; 

Editar : anteriormente sugerí en este espacio que podría no ser necesario usar el controlador de onload cuando se trata de un URI de datos. Basado en pruebas experimentales de esta pregunta , no es seguro hacerlo. La secuencia anterior: crea la imagen, configura la onload para usar la nueva imagen y luego configura el src es necesario que algunos navegadores utilicen los resultados.

 function drawDataURIOnCanvas(strDataURI, canvas) { "use strict"; var img = new window.Image(); img.addEventListener("load", function () { canvas.getContext("2d").drawImage(img, 0, 0); }); img.setAttribute("src", strDataURI); } 

Tal vez este violín ayudaría a ThumbGen – jsFiddle. Utiliza File API y Canvas para generar miniaturas de imágenes dinámicamente.

 (function (doc) { var oError = null; var oFileIn = doc.getElementById('fileIn'); var oFileReader = new FileReader(); var oImage = new Image(); oFileIn.addEventListener('change', function () { var oFile = this.files[0]; var oLogInfo = doc.getElementById('logInfo'); var rFltr = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i try { if (rFltr.test(oFile.type)) { oFileReader.readAsDataURL(oFile); oLogInfo.setAttribute('class', 'message info'); throw 'Preview for ' + oFile.name; } else { oLogInfo.setAttribute('class', 'message error'); throw oFile.name + ' is not a valid image'; } } catch (err) { if (oError) { oLogInfo.removeChild(oError); oError = null; $('#logInfo').fadeOut(); $('#imgThumb').fadeOut(); } oError = doc.createTextNode(err); oLogInfo.appendChild(oError); $('#logInfo').fadeIn(); } }, false); oFileReader.addEventListener('load', function (e) { oImage.src = e.target.result; }, false); oImage.addEventListener('load', function () { if (oCanvas) { oCanvas = null; oContext = null; $('#imgThumb').fadeOut(); } var oCanvas = doc.getElementById('imgThumb'); var oContext = oCanvas.getContext('2d'); var nWidth = (this.width > 500) ? this.width / 4 : this.width; var nHeight = (this.height > 500) ? this.height / 4 : this.height; oCanvas.setAttribute('width', nWidth); oCanvas.setAttribute('height', nHeight); oContext.drawImage(this, 0, 0, nWidth, nHeight); $('#imgThumb').fadeIn(); }, false); })(document); 

en javascript, usando jquery para la selección de id de canvas:

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

html5: