open - og:image

Dibujar una imagen desde 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 la base 64 codificada. ¿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

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 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 : 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.

Answer 2

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

Answer 3

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:

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

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