Dibujar una imagen de una URL de datos a un lienzo


112

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


No funciona en este caso :: jsfiddle.net/V92Gn/5376
arqam

Respuestas:


194

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.


5
Usar el controlador de carga es definitivamente una buena idea. Es posible que lleve un tiempo cargar la imagen, por lo que es mejor ir a lo seguro. :)
Juho Vepsäläinen

1
@bebraw Veamos eso con seguridad: stackoverflow.com/questions/4776670/… :)
Phrogz

@Phrogz me da un error: var ctx = myCanvas.getContext ('2d'); simplemente copie /
pegue

@jepser ¿Tiene un canvaselemento en su página con esa identificación? ¿Te has asegurado que myCanvasno es nulo? Si aún tiene problemas, publique su propia pregunta o visite el canal de chat de JavaScript .
Phrogz

@DavidMurdoch Excelente información. ¿Tiene un error de Chromium al que podría vincular, para que los usuarios sepan cuándo la afirmación anterior ya no es cierta?
Phrogz

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

2

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

0

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

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

1
Esto no responde a la pregunta del OP relacionada con dataURL.
Phrogz

7
¿Por qué usarías jQuery para seleccionar el lienzo? ¿Escribir document.getElementById () es demasiado trabajo?
Scott

Este código funciona, aunque no está relacionado con la pregunta
Mohammad Ashfaq
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.