validacion - validar formulario javascript html5

Obtener datos de imagen en JavaScript?

Question

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.

Answer 1

Además de la respuesta de matthew, me gustaría decir que image.width y image.height devuelven el tamaño mostrado de la imagen (y recortan la imagen al dibujarla en el lienzo)

En su lugar, use naturalWidth y naturalHeight, que utiliza la imagen en tamaño real.

Consulte http://www.whatwg.org/specs/web-apps/current-work/multipage/edits.html#dom-img-naturalwidth

Answer 2

Esta función toma la URL y luego devuelve la imagen BASE64.

function getBase64FromImageUrl(url) {
    var img = new Image();

    img.setAttribute(''crossOrigin'', ''anonymous'');

    img.onload = function () {
        var canvas = document.createElement("canvas");
        canvas.width =this.width;
        canvas.height =this.height;

        var ctx = canvas.getContext("2d");
        ctx.drawImage(this, 0, 0);

        var dataURL = canvas.toDataURL("image/png");

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

    img.src = url;
}

Llámelo así: getBase64FromImageUrl("images/slbltxt.png")

Answer 3

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

Answer 4

Una versión más moderna de la respuesta de kaiido usando fetch sería:

function toDataURL(url) {
  return fetch(url)
      .then((response)=> {
        return response.blob();
      })
      .then(blob=> {
        return URL.createObjectURL(blob);
      });
}

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

Answer 5

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

Answer 6

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