firefox formulario - Obtener datos de imagen en JavaScript?




capturar enviar (6)

Tengo una página HTML normal con algunas imágenes (solo <img /> HTML regulares). Me gustaría obtener su contenido, codificado en base64 preferiblemente, sin la necesidad de volver a descargar la imagen (es decir, ya está cargada en el navegador, por lo que ahora quiero el contenido).

Me encantaría lograr eso con Greasemonkey y Firefox.


Answers

Llegó mucho después, pero ninguna de las respuestas aquí es del todo correcta.

Cuando se dibuja en un lienzo, la imagen pasada se descomprime + todo se multiplica previamente.
Cuando se exporta, se descomprime o se vuelve a comprimir con un algoritmo diferente y no se multiplica.

Todos los navegadores y dispositivos tendrán diferentes errores de redondeo en este proceso.
(ver huellas dactilares de lona ).

Entonces, si uno quiere una versión base64 de un archivo de imagen, tiene que solicitarlo nuevamente (la mayoría de las veces provendrá de la memoria caché), pero esta vez como un Blob.

Luego puede usar un FileReader para leerlo como ArrayBuffer o como dataURL.

function toDataURL(url, callback){
    var xhr = new XMLHttpRequest();
    xhr.open('get', url);
    xhr.responseType = 'blob';
    xhr.onload = function(){
      var fr = new FileReader();
    
      fr.onload = function(){
        callback(this.result);
      };
    
      fr.readAsDataURL(xhr.response); // async call
    };
    
    xhr.send();
}

toDataURL(myImage.src, function(dataURL){
  result.src = dataURL;

  // now just to show that passing to a canvas doesn't hold the same results
  var canvas = document.createElement('canvas');
  canvas.width = myImage.naturalWidth;
  canvas.height = myImage.naturalHeight;
  canvas.getContext('2d').drawImage(myImage, 0,0);

  console.log(canvas.toDataURL() === dataURL); // false - not same data
  });
<img id="myImage" src="https://dl.dropboxusercontent.com/s/4e90e48s5vtmfbd/aaa.png" crossOrigin="anonymous">
<img id="result">


Nota: Esto solo funciona si la imagen es del mismo dominio que la página, o tiene el crossOrigin="anonymous" y el servidor admite CORS. Tampoco te va a dar el archivo original, sino una versión recodificada. Si necesita que el resultado sea idéntico al original, vea la respuesta de Kaiido .

Necesitará crear un elemento de lienzo con las dimensiones correctas y copiar los datos de imagen con la función drawImage . Luego, puede usar la función toDataURL para obtener un dato: url que tiene la imagen codificada en base 64. Tenga en cuenta que la imagen debe estar completamente cargada, o simplemente obtendrá una imagen vacía (negra, transparente).

Sería algo como esto. Nunca he escrito un script de Greasemonkey, por lo que es posible que deba ajustar el código para que se ejecute en ese entorno.

function getBase64Image(img) {
    // Create an empty canvas element
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;

    // Copy the image contents to the canvas
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);

    // Get the data-URL formatted image
    // Firefox supports PNG and JPEG. You could check img.src to
    // guess the original format, but be aware the using "image/jpg"
    // will re-encode the image.
    var dataURL = canvas.toDataURL("image/png");

    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}

Obtener una imagen con formato JPEG no funciona en versiones anteriores (alrededor de 3.5) de Firefox, por lo que si quieres admitir eso, deberás verificar la compatibilidad. Si la codificación no es compatible, se establecerá de forma predeterminada en "imagen / png".



function encodeImageFileAsURL(cb) {
    return function() {
        var file = this.files[0];
        var reader = new FileReader();
        reader.onloadend = function() {
            cb(reader.result);
        }
        reader.readAsDataURL(file);
    }
}

$('#inputFileToLoad').change(encodeImageFileAsURL(function(base64Img) {
    $('.output')
        .find('textarea')
        .val(base64Img)
        .end()
        .find('a')
        .attr('href', base64Img)
        .text(base64Img)
        .end()
        .find('img')
        .attr('src', base64Img);
}));
@import url('//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css'); body{ padding: 20px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Input</h2>
<form class="input-group" id="img2b64">
    <input id="inputFileToLoad" type="file" onchange="encodeImageFileAsURL();" />
</form>
<hr>
Aquí está Working Fiddle Ejemplo: - subir y obtener datos de imagen



Es una prueba de verificación estricta.

Es algo bueno, especialmente si está marcando entre 0 y falso y nulo.

Por ejemplo, si tiene:

$a = 0;

Entonces:

$a==0; 
$a==NULL;
$a==false;

Todas las devoluciones son verdaderas y es posible que no quieras esto. Supongamos que tiene una función que puede devolver el índice 0 de una matriz o falso si falla. Si marca con "==" falso, puede obtener un resultado confuso.

Así que con lo mismo que el anterior, pero una prueba estricta:

$a = 0;

$a===0; // returns true
$a===NULL; // returns false
$a===false; // returns false




javascript image firefox greasemonkey base64