Dibujar una imagen de una URL de datos a un lienzo

Question

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

Estoy usando el

var strDataURI = oCanvas.toDataURL(); 

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

Quiero usar el strDataURI y crear la imagen? ¿Es poosible?
Si no es, ¿qué posiblemente puede ser la solución para cargar la imagen en un lienzo?

Answer 1

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

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

los drawImage() método del contexto de lienzo HTML5 le permite copiar toda o una parte de una imagen (o lienzo o video) en un lienzo.

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: Sugerí anteriormente en este espacio que podría no ser necesario usar el onload manejador 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, establece el onload para usar la nueva imagen y después selecciona el src—Es necesario que algunos navegadores seguramente usen los resultados.

Answer 2

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

Answer 3

Quizás este violín ayudará Thumbgen - JSfiddle Utiliza API de archivo y lienzo 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);

Answer 4

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>