压缩基本64数据URI图像

Question

问题

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

问题

压缩图像数据并将图像数据发送到服务器

的最佳方法是什么

背景

我创建的图表非常复杂，为了节省自己的头痛，所有这些都已转换为基本64数据URI的帆布。当前，数据URI已发布到服务器上以处理处理。张贴的信息可以在每个图表中以大约400-600kb的大约400-600kb，最大图表的12MB。

。

图表是可以操纵/重新排序的组织图。

是否有更好的方法来压缩这些字符串，然后将其发送回服务器？

研究

我检查了一些事情：

https://github.com/brunobar79/j-i-c/blob/master/src/jic.js（看起来不像一个选项只是调整大小）

http://pastebin.com/mhjzbsqw（看起来很有趣）

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

https://code.google.com/p/jslzjb/source/browse/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帆布技术解决我的此问题的版本。我正在使用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不会让我执行质量参数（而且我不确定它在哪个浏览器中得到了多么广泛的支持），但这是可以的，因为所产生的图像很小。如果您离开哑光型空白，则默认为PNG，在我的情况下，该默认为PNG，比JPEG大3-4x。

Answer 3

我终于可以使用相当大的文件。

要这样做，我使用了lz-string，如上所示。

有一个问题，即通过AJAX发送UTF-16数据是不建议的，因此..它行不通。修复程序是转换为UTF-16和UTF-8。

这是我正在使用的转换代码。我不确定标准的endian是什么，顺便说一句：

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

如果您使用的是node.js，则此代码在两侧都可以。如果没有，您必须为服务器端编写自己的这些转换器版本。

ph！这是多么一天。