Dibujar una imagen de una URL de datos a un lienzo

¿Cómo puedo abrir una imagen en un lienzo? que esta codificado

Estoy usando el

var strDataURI = oCanvas.toDataURL(); 

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

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

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

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

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

Podrías 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 : sugerí anteriormente en este espacio que podría no ser necesario usar el onloadcontrolador cuando se trata de un URI de datos. Según las pruebas experimentales de esta pregunta , no es seguro hacerlo. La secuencia anterior (crear la imagen, configurar onloadpara usar la nueva imagen y luego configurar) srces necesaria para que algunos navegadores usen los resultados con seguridad.

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

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

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

Es posible que desee borrar la imagen anterior antes de configurar una nueva.

También necesita actualizar el tamaño del lienzo para una nueva imagen.

Así es como lo estoy haciendo en mi proyecto:

    // on image load update Canvas Image 
    this.image.onload = () => {

      // Clear Old Image and Reset Bounds
      canvasContext.clearRect(0, 0, this.canvas.width, this.canvas.height);
      this.canvas.height = this.image.height;
      this.canvas.width = this.image.width;

      // Redraw Image
      canvasContext.drawImage(
        this.image,
        0,
        0,
        this.image.width,
        this.image.height
      );
    };

en javascript, usando jquery para la selección de ID de lienzo:

 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>