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

¿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

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.

Respuesta corta:

const base64Canvas = canvas.toDataURL("image/jpeg").split(';base64,')[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/