压缩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。

这是我正在使用的转换代码。 我不确定标准的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，则此代码适用于双方。 如果没有，您将不得不为服务器端编写自己的这些转换器版本。

唷！ 这是多么的一天。

Answer 4

这不是一个令人满意的答案，但可能没有库可以提供您想要的结果。

你说调整大小不是一种选择，但那么，是什么？ 只有无损压缩？ Base64字符串已经表示压缩图像，我认为任何库都不会提供无损压缩。