压缩base64数据uri图像

Question

问题

我正在创建多个图表,然后发送到服务器以创建PDF.这些数据可能会变大.

题

压缩图像数据并将其发送到服务器的最佳方法是什么

背景

我正在创建的图表相当复杂,为了省去自己的头痛,所有这些都被转换为生成base64数据uri的画布.目前,数据uri被发布到服务器以处理处理.对于小图表,发布信息可以相当大,大约400-600kb,对于最大图表,大小为12mb.

图表是可以操作/重新排序的组织结构图.

在将这些字符串发送回服务器之前是否有更好的压缩方法？

研究

我看过的一些东西:

https://github.com/brunobar79/JIC/blob/master/src/JIC.js(看起来不像只是调整大小的选项)

http://pastebin.com/MhJZBsqW(看起来很有趣)

但是引用了我找不到的外部库: C_H_Image Lib_MinifyJpeg

https://code.google.com/p/jslzjb/source/browse/trunk/Iuppiter.js?r=2(看起来这可行,但依赖于服务器端的解压缩)

Answer 1

也许字符串压缩是您的解决方案.这会将数据转换为字节数组.

例如,有多种实现和算法

• LZMA-JS Lempel-Ziv-Markov链(LZMA)压缩算法的独立JavaScript实现.

  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:JavaScript压缩,快!

  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);
  

Answer 2

我需要从较大的图片生成缩略图.我决定使用HTML5 Canvas技术解决我的这个问题的版本.我正在使用GWT,所以我的代码是:

//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;
}

如果你正在使用JS,你可能会得到这样的想法:

• 使画布的大小与所需的输出图像相同
• 以新大小在画布上绘制输入图像
• 调用canvas.toDataURL("mime-type",质量)

您可以使用我认为的任何mime类型,但对我来说,jpeg是最小的,并且与我的桌面图像程序的结果相当.

我的GWT不会让我做质量参数(我不是100%肯定它在哪些浏览器中得到广泛支持),但这没关系,因为生成的图像非常小.如果你将mime-type留空,则默认为png,在我的情况下,它比jpeg大3-4倍.

Answer 3

我终于可以处理相当大的文件了。

为此，我使用了lz-string，如上所示。

但有一个问题，即通过 ajax 发送 UTF-16 数据已被弃用，所以......它不起作用。修复方法是在 UTF-16 和 UTF-8 之间进行转换。

Here's the conversion code I'm using. I'm not sure what the standard endian is, btw:

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;
}

If you're using Node.js, this code works on both sides. If not, you'll have to write your own version of these converters for the server side.

Phew! What a day this was.