使用 Filereader API 加载图像并使用 JSZip 压缩它

Question

我正在尝试使用 fileready api 加载图像，将其保存在使用 jszip 制作的新制作的 zip 文件中，名称为 logo.png。我的问题是从文件阅读器获取图像以保存在 zip 中。

$(document).ready(function() {

  $(".load").on("change", function(evt) {
    var file = evt.target.files;
    var reader = new FileReader();

    reader.onload = (function(event) {
      return function(e) {
        var imgBinary = e.target.result;
        var imgz = new Image();
        imgz.attr("src", event.target.result);
        imgz.attr("width", 128);
        imgz.attr("height", 128);
        holder.html("");
        holder.append(imgz);
      };
    });
    reader.readAsDataURL(file);
    // reader.readAsArrayBuffer(file);

    // Download Zip
    $(".download").on("click", function() {
      var zip = new JSZip();
      zip.load(webAppZipBinary);
      zip.file("Hello.txt", "Hello World\n");
      var content = zip.generate({type:"blob"});
      // see FileSaver.js
      saveAs(content, theFile.name.substr(theFile.name.length - theFile.name.length, theFile.name.length - 4) + "-win.zip");
    });

    return false;
  });


  // Trigger Load Image
  $(".trigload").click(function() {
    $("input").trigger("click");
  });
});

@import url("http://necolas.github.io/normalize.css/3.0.1/normalize.css");

.hide {
  display: none;
}

.holder {
  text-align: center;
}

.fr {
  float: right;
}

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="http://stuk.github.io/jszip/dist/jszip.min.js"></script>
<script type="text/javascript" src="http://stuk.github.io/jszip-utils/dist/jszip-utils.js"></script>
<script type="text/javascript" src="http://stuk.github.io/jszip/vendor/FileSaver.js"></script>

<input type="file" class="hide">
<a class="trigload" href="javascript:void(0)">Load Image</a>
<a class="download fr" href="javascript:void(0)">Download</a>
<div class="holder"></div>

Answer 1

我改变了什么：

• 我认为我们不能使用 ArrayBuffer 来预览图像，我现在有两个 Reader：一个用于预览，一个用于 JSZip（它在 ArrayBuffer 上的性能比在字符串上的性能好）
• 我将“下载代码”移到了阅读器之后：我们需要读取 Blob，将内容添加到 zip 中，然后然后准备下载链接。您还有其他方法可以做到这一点，这只是一个示例。
• 我在 zip 中添加了 logo.png。
• 我修复了一些小错误（缺少 css 类、Image#attr 不存在等）

function displayPreview(file) {

  var reader = new FileReader();

  reader.onload = function(e) {
    var holder = $(".holder");
    var imgUrl = e.target.result;
    var imgz = $("<img>");
    imgz.attr("src", imgUrl);
    imgz.attr("width", 128);
    imgz.attr("height", 128);
    holder.html("");
    holder.append(imgz);
  };
  reader.readAsDataURL(file);
}

$(document).ready(function() {
  $(".load").on("change", function(evt) {
    var file = evt.target.files[0];
    displayPreview(file);

    var reader = new FileReader();

    reader.onload = function(e) {
      
      // Download Zip
      $(".download").on("click", function() {
        var zip = new JSZip();
        zip.file("logo.png", e.target.result);
        var content = zip.generate({type:"blob"});
        // see FileSaver.js
        saveAs(content, "test-win.zip");
      });
    };
    reader.readAsArrayBuffer(file);

    return false;
  });


  // Trigger Load Image
  $(".trigload").click(function() {
    $("input").trigger("click");
  });
});

@import url("http://necolas.github.io/normalize.css/3.0.1/normalize.css");

.hide {
  display: none;
}

.holder {
  text-align: center;
}

.fr {
  float: right;
}

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="http://stuk.github.io/jszip/dist/jszip.min.js"></script>
<script type="text/javascript" src="http://stuk.github.io/jszip-utils/dist/jszip-utils.js"></script>
<script type="text/javascript" src="http://stuk.github.io/jszip/vendor/FileSaver.js"></script>

<input type="file" class="hide load">
<a class="trigload" href="javascript:void(0)">Load Image</a>
<a class="download fr" href="javascript:void(0)">Download</a>
<div class="holder"></div>

Answer 2

编织 - https://mikethedj4.github.io/kodeWeave/editor/#4c11c6ef34c5430c0a53be9fd2432092

自从我发布此内容以来已经一年了，我只是想分享另一种方法。

我不喜欢使用 2 个文件阅读器的想法，所以我通过抓取每个图像的源并将其添加到 zip 文件来保存每个图像。

这是怎么做的！

zip.file("logo.png", $(".imgorigholder > img").attr("src").split('base64,')[1],{base64: true});

使用 JSZip v2.4.0 测试（目前已过时）。

function displayPreview(file) {
  var reader = new FileReader();

  reader.onload = function(e) {
    var imgorigholder = $(".imgorigholder");
    var imgOrigUrl = e.target.result;
    var imgOrig = $("<img>");
    imgOrig.attr("src", imgOrigUrl);
    imgorigholder.empty();
    imgorigholder.append(imgOrig);
  };
  reader.readAsDataURL(file);
  exportIt.style.display = "block";
}

// Show zip loader when image has been loaded
loader.onchange = function(evt) {
  var file = evt.target.files[0];
  displayPreview(file);
};

exportIt.onclick = function() {
  var zip = new JSZip();

  // Main Icon
  zip.file("logo.png", $(".imgorigholder > img").attr("src").split('base64,')[1],{base64: true});

  // Files for exported app
  zip.file("hello.txt", "Hello sexy mommas");

  // Export Chrome Application
  var content = zip.generate({type:"blob"});
  saveAs(content, "test.zip");
};

button {
  display: none;
  float: right;
}

.imgorigholder {
  text-align: center;
}

<input type="file" id="loader" accept="image/*" />
<button id="exportIt">Save as zip file</button>

<div class="imgorigholder hide"></div>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://stuk.github.io/jszip/dist/jszip.min.js"></script>
<script src="http://stuk.github.io/jszip-utils/dist/jszip-utils.js"></script>
<script src="http://stuk.github.io/jszip/vendor/FileSaver.js"></script>