壓縮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字符串已經表示壓縮圖像，我認為任何庫都不會提供無損壓縮。