Pregunta Dibujar una imagen desde una URL de datos a un lienzo


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


75
2018-01-23 13:07


origen


Respuestas:


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 a su URL de datos. Por ejemplo:

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

los drawImage() método de 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 onload controlador 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 el onload usar la nueva imagen, y entonces selecciona el src-Es necesario que algunos navegadores seguramente utilicen los resultados.


139
2018-01-23 20:43



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

8
2017-11-27 11:00



Tal vez este violín ayudarí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);

2
2017-08-11 13:45



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>

-2
2018-01-23 14:25