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来预览图像，我现在有两个读者：一个用于预览，一个用于JSZip（在ArrayBuffer上比在字符串上表现更好）
我在读者之后移动了“下载代码”：我们需要阅读Blob，将内容添加到zip并然后准备下载链接。你有其他方法可以做到这一点，这只是一个例子。

我在zip中添加了logo.png。

我修复了小错误（缺少css类，Image＃attr不存在等）

Answer 2

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

我发布此消息已经过去了一年，我只想分享另一种方式来实现这一目标。

我不喜欢使用2个Filereaders的想法，所以我通过抓取它的源并将其添加到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压缩它

2 个答案: