Cómo dibujar una imagen desde una URL de datos a un lienzo

Question

¿Cómo puedo abrir una imagen en un lienzo? que está codificada

estoy usando el

var strDataURI = oCanvas.toDataURL(); 

La salida es la base codificado imagen 64. ¿Cómo puedo dibujar esta imagen en un lienzo?

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 lienzo?

Answer 1

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

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

El drawImage() method de Contexto HTML5 Canvas le permite copiar la totalidad o una parte de una imagen (o el lienzo, o vídeo) en un lienzo.

Es posible utilizarlo como tal:

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: Me sugirió anteriormente en este espacio que puede que no sea necesario utilizar el manejador onload cuando una URI de datos está involucrado. Según pruebas experimentales del this question, no es seguro hacerlo. La secuencia anterior: crea la imagen, establece onload para usar la nueva imagen y luego configura el src -es necesario que algunos navegadores seguramente utilicen los resultados.

Answer 2

en javascript, usando jQuery para la selección de lona Identificación:

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> 

Answer 3

Quizás este violín ayudaría ThumbGen - jsFiddle Utiliza File API y Canvas para generar imágenes en miniatura de forma dinámica.

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

Answer 4

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