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

Question

我正在尝试使用 fileready api 加载图像，将其保存在使用 jszip 新制作的 zip 文件中，名称为 logo.png。我的问题是从 filereader 中获取要保存在 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 来预览图像，我现在有两个 Readers：一个用于预览，一个用于 JSZip（在 ArrayBuffer 上比在字符串上执行得更好）
我将 "download code" 移到 Reader 之后：我们需要读取 Blob，将内容添加到 zip 和然后准备下载link。你还有其他方法，这只是一个例子。
我在 zip 中添加了 logo.png。
我修复了一些小错误（缺少 css class、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 个 Filereader 的想法，所以我通过抓取它的源并将其添加到 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>

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

Load image with Filereader API and zip it using JSZip

javascript

jquery

filereader

jszip