javascript - imagen - Comprimiendo imágenes de datos de base64

convert image to base64 javascript

Question

Problema

Estoy creando varios gráficos que luego se envían al servidor para crear un PDF. Estos datos pueden llegar a ser grandes.

Pregunta

¿Cuál es la mejor manera de comprimir y enviar los datos de la imagen al servidor?

Fondo

Los gráficos que estoy creando son bastante complejos, para ahorrarme el dolor de cabeza, todo esto se convierte en un lienzo donde se genera el uri de datos base64. Actualmente los datos uri (s) se publican en el servidor para manejar el procesamiento. La información publicada puede ser bastante grande en alrededor de 400-600kb cada uno para un gráfico pequeño y 12 MB para el gráfico más grande.

Los gráficos son organigramas que pueden ser manipulados / reordenados.

¿Existe un método mejor para comprimir estas cadenas antes de enviarlas de nuevo al servidor?

Investigación

Algunas cosas que he comprobado:

https://github.com/brunobar79/J-I-C/blob/master/src/JIC.js (no parece que una opción solo cambie de tamaño)

http://pastebin.com/MhJZBsqW (parece interesante)

Pero hace referencia a las bibliotecas externas que no puedo encontrar: C_H_Image Lib_MinifyJpeg

https://code.google.com/p/jslzjb/source/browse/trunk/Iuppiter.js?r=2 (parece que esto podría funcionar pero depende de la descompresión en el lado del servidor)

Answer 1

Esta no es una respuesta muy satisfactoria, pero probablemente no haya bibliotecas que den el resultado que desea.

Usted dice que cambiar el tamaño no es una opción, pero entonces, ¿qué es? ¿Sólo compresión sin pérdida? Las cadenas Base64 ya representan una imagen comprimida, no creo que ninguna biblioteca proporcione compresión sin pérdida.

Answer 2

Finalmente conseguí esto trabajando con archivos bastante grandes.

Para hacerlo, usé lz-string , como se muestra arriba.

Sin embargo, hay un problema, que es que el envío de datos UTF-16 a través de ajax está en desuso , así que ... no funciona. La solución es convertir hacia y desde UTF-16 y UTF-8.

Aquí está el código de conversión que estoy usando. No estoy seguro de cuál es el endian estándar, por cierto:

var UTF = {};

UTF.U16to8 = function(convertMe) {
var out = "";
  for(var i = 0; i < convertMe.length; i++) {
      var charCode = convertMe.charCodeAt(i);
      out += String.fromCharCode(~~(charCode/256));
      out += String.fromCharCode(charCode%256);
    }
  return out;
}

UTF.U8to16 = function(convertMe) {
  var out = ""
  for(var i = 0; i < convertMe.length; i += 2) {
    var charCode = convertMe.charCodeAt(i)*256;
    charCode += convertMe.charCodeAt(i+1);
    out += String.fromCharCode(charCode)
  }
  return out;
}

Si está utilizando Node.js, este código funciona en ambos lados. Si no, tendrá que escribir su propia versión de estos convertidores para el lado del servidor.

¡Uf! Qué día fue este.

Answer 3

Necesitaba generar miniaturas a partir de imágenes más grandes. Decidí resolver mi versión de este problema con la técnica HTML5 Canvas. Estoy usando GWT por lo que mi código es:

//Scale to size
public static String scaleImage(Image image, int width, int height) {

    Canvas canvasTmp = Canvas.createIfSupported();
    Context2d context = canvasTmp.getContext2d();

    canvasTmp.setCoordinateSpaceWidth(width);
    canvasTmp.setCoordinateSpaceHeight(height);

    ImageElement imageElement = ImageElement.as(image.getElement());

    context.drawImage(imageElement, 0, 0, width, height);

    //Most browsers support an extra option for: toDataURL(mime type, quality) where quality = 0-1 double.
    //This is not available through this java library but might work with elemental version?
    String tempStr = canvasTmp.toDataUrl("image/jpeg");

    return tempStr;
}

Si está utilizando JS, probablemente pueda tener la idea:

• Haz un lienzo del tamaño de la imagen de salida deseada.
• dibujar la imagen de entrada en el lienzo en el nuevo tamaño
• llame a canvas.toDataURL ("mime-type", calidad)

Puedes usar cualquier tipo mime, creo, pero para mí el jpeg era el más pequeño y era comparable a los resultados de mi programa de imagen de escritorio.

Mi GWT no me permitió hacer el parámetro de calidad (y no estoy 100% seguro de cuán ampliamente se admite en qué navegadores), pero eso estaba bien porque las imágenes resultantes eran bastante pequeñas. Si deja el tipo mime en blanco, el valor predeterminado es png, que en mi caso era 3-4 veces más grande que jpeg.

Answer 4

Tal vez la compresión de cuerdas es la solución para ti. Esto convierte los datos a matrices de bytes.

Hay múltiples implementaciones y algoritmos alrededor, por ejemplo

• LZMA-JS Una implementación de JavaScript autónoma del algoritmo de compresión Lempel-Ziv-Markov en cadena (LZMA).

  my_lzma = new LZMA("./lzma_worker.js");
  my_lzma.compress("This is my compression test.", 1, function on_compress_complete(result) {
      console.log("Compressed: " + result);
      my_lzma.decompress(result, function on_decompress_complete(result) {
          console.log("Decompressed: " + result);
      }, function on_decompress_progress_update(percent) {
          console.log("Decompressing: " + (percent * 100) + "%");
      });
  }, function on_compress_progress_update(percent) {
      console.log("Compressing: " + (percent * 100) + "%");
  });

• lz-string : compresión de JavaScript, rápido!

  var str = "This is my compression test.";
  console.log("Size of sample is: " + str.length);
  var compressed = LZString.compress(str);
  console.log("Size of compressed sample is: " + compressed.length);
  str = LZString.decompress(compressed);
  console.log("Sample is: " + str);