Obtener datos binarios (base64) de HTML5 Canvas (readAsBinaryString)


79

¿Hay alguna forma de leer el contenido de un lienzo HTML como datos binarios?

Por el momento, tengo el siguiente HTML para mostrar un archivo de entrada y el lienzo debajo de él:

<p><button id="myButton" type="button">Get Image Content</button></p>
<p>Input:<input id="fileInput" type="file"/></p>
<p>Canvas<canvas id="myCanvas" width="578" height="200"/></p>

Luego configuré mi archivo de entrada para configurar el lienzo correctamente, lo que funciona bien:

$('#fileInput').on('change', function() {
    $.each(this.files, function() {
        var image = new Image();
            image.src = window.URL.createObjectURL(this);

        image.onload = function() {
            $("canvas").drawImage({
                source: image,
                x: 50, y: 50,
                width: 100,
                fromCenter: false
            });
        };
    });
});

Ahora necesito obtener los datos binarios (codificados en Base64) del Canvas cuando se hace clic en el botón para enviar los datos al servidor ...

El resultado final es que necesito proporcionar al usuario la capacidad de seleccionar un archivo, recortarlo / redimensionarlo y luego hacer clic en un botón, momento en el cual la imagen editada se cargará en el servidor (no puedo hacer el lado del servidor recorte / cambio de tamaño debido a limitaciones del lado del servidor ...)

¡Cualquier ayuda sería genial! Salud

Respuestas:


147

El canvaselemento proporciona un toDataURLmétodo que devuelve una data:URL que incluye los datos de imagen codificados en base64 en un formato determinado. Por ejemplo:

var jpegUrl = canvas.toDataURL("image/jpeg");
var pngUrl = canvas.toDataURL(); // PNG is the default

Aunque el valor de retorno no es solo los datos binarios codificados en base64, es muy sencillo recortar el esquema y el tipo de archivo para obtener solo los datos que desea.

El toDataURLmétodo fallará si el navegador cree que ha dibujado en el lienzo datos que se cargaron desde un origen diferente, por lo que este enfoque solo funcionará si sus archivos de imagen se cargan desde el mismo servidor que la página HTML cuyo script está realizando esto operación.

Para obtener más información, consulte los documentos MDN sobre la canvasAPI , que incluyen detalles sobre el esquema de URItoDataURL , y el artículo de Wikipedia sobre el data:esquema de URI , que incluye detalles sobre el formato de la URI que recibirá de esta llamada.


No todos los navegadores web canvas.toDataURL () vienen en PNG por defecto; debe especificarlo a través de canvas.toDataURL ('image / png')
PYK

6

Respuesta corta:

const base64Canvas = canvas.toDataURL("image/jpeg").split(';base64,')[1];

1
Completado olvidó que tenía que dividir el ;base64,valor. Me volvió loco durante 45 minutos
Karl Taylor

1

Viendo cómo dibujas tu lienzo con

$("canvas").drawImage();

parece que usas jQuery Canvas ( jCanvas ) de Caleb Evans. De hecho, uso ese complemento y tiene una forma simple de recuperar la cadena de imagen de lienzo base64 con$('canvas').getCanvasImage();

Aquí hay un violín funcional para ti: http://jsfiddle.net/e6nqzxpn/


canvas.getCanvasImage no es una función
Rajiv Sharma

@RajivSharma realidad jCanvas tiene esa función projects.calebevans.me/jcanvas/docs/getCanvasImage la canvas.toDataURL();hace parecer más fácil, sin embargo.
zfb
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.