new - img url to base64 javascript

Obtención de datos binarios(base64) desde HTML5 Canvas(readAsBinaryString)

Question

¿Hay alguna forma de leer los contenidos 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, 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) desde el Lienzo cuando se hace clic en el botón para que envíe los datos al servidor ...

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

¡Cualquier ayuda sería genial! Aclamaciones

Answer 1

El elemento canvas proporciona un método toDataURL que devuelve 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 el de los datos binarios codificados en base64, es una simple cuestión recortar el esquema y el tipo de archivo para obtener solo los datos que desea.

El método toDataURL fallará si el navegador piensa que ha dibujado al lienzo los 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 se está ejecutando esta operacion.

Para obtener más información, consulte los documentos de MDN en la API de toDataURL , que incluye detalles sobre toDataURL y el artículo de Wikipedia sobre los data: esquema de URI , que incluye detalles sobre el formato del URI que recibirá de esta convocatoria.

Answer 2

Ver cómo dibujas tu lienzo con

$("canvas").drawImage();

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

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