使用Filereader API加载图像，并使用JSZip进行压缩

Load image with Filereader API and zip it using JSZip

本文关键字：JSZip 压缩 API Filereader 加载 图像 使用      更新时间：2023-09-26

我试图使用fileready api加载图像，将其保存在使用jszip制作的新制作的zip文件中，名称为logo.png。我的问题是得到图像保存在压缩文件阅读器。

$(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>

我改变了什么:

  • 我不认为我们可以使用ArrayBuffer来预览图像，我现在有两个阅读器:一个用于预览，一个用于JSZip(在ArrayBuffer上比在字符串上执行得更好)
  • 我将"下载代码"移动到 Reader之后:我们需要读取Blob，将内容添加到zip和然后准备下载链接。你有其他的方法，这只是一个例子。
  • 我在zip文件中添加了logo.png。我修复了一些小错误(缺少css类，图像#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>

Weave - 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>

相关文章：