JSZip压缩图片上传、加密、解密、显示图片

Question

最初我使用 FileReader 在客户端将上传的图像转换为 base64，然后 encrypt。会将结果附加到表单字段然后提交，但这会占用太多时间，所以我正在寻找替代方法。

我正在尝试使用 JSZip 先压缩，然后加密，然后提交、检索、解密和显示图像，但我不知道该怎么做。我的压缩尝试看起来像这样。

$(document).on("change", "#chatImage", function() {
    var rid = $(this).closest(".chat").data("id");
    var tempSrc = $(this).val();
    /* Make a zip file here */
    var fi = $(this);
    var fileInput = fi;
    var files = [];
    // get all selected file
    $.each(fileInput.files, function(i, file) {
        files.push(file);
    });
    //create a zip object
    var zip = new JSZip();
    //add all files to zip 
    function addFileToZip(n) {
        if(n >= files.length) {
            //here generate file to zip on client side
            zip.generateAsync({type:"blob", compression:"default"}).then(function(content){
                //generated zip content to file type
                var files = new File([content], "default.zip");
                console.log(files);
                var eImgArray = {};
                $.ajax({
                    url : ajax_object.ajax_url,
                    type : 'post',
                    data : {
                    action: 'get_room_member_keys',
                    rid : rid,
                    },
                    beforeSend: function() {},
                    success: function(html) {
                        var pubKeys = $.parseJSON(html);
                        $.each( pubKeys, function( key, value ) {
                            var imgEncrypt = cryptico.encrypt(files, value);
                            var imgSrc = imgEncrypt.cipher;
                            eImgArray[key] = imgSrc;
                        });
                        var strImgArray = JSON.stringify(eImgArray);
                    },
                });
            });
            return;
        }
        var file = files[n];                    
        var arrayBuffer;
        var fileReader = new FileReader();
        fileReader.onload = function() {
            arrayBuffer = this.result;
            zip.file(file.name, arrayBuffer);
            addFileToZip(n + 1);
        }
        fileReader.readAsArrayBuffer(file);
    }
    addFileToZip(0);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.2.0/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a id="jaj3dm" class="chat" />
<input id="chatImage" type="file" multiple="multiple" />

这在控制台中显示了一个加密字符串和压缩结果，但是当我解密并将结果记录到控制台时，我什么也得不到。执行此操作的正确方法和/或更好的方法是什么？

Answer 1

你把这个复杂化得可笑了！

$(document).on("change", "#chatImage", function() {
  var files = this.files;
  var zip = new JSZip();

  for (var i = 0; i < files.length; i += 1) {
    var file = files[i];
    zip.file(file.name, file);

    console.log("added", file.name);
  }

  console.log("generating zip…");
  zip.generateAsync({type: "blob"}).then(function(content) {
    console.log("done. creating download link");

    /* All that "sending to the interwebz" stuff */
    var link = document.createElement("a");
    link.href = window.URL.createObjectURL(content);
    link.innerText = "Download…";
    document.body.appendChild(link);

    /* display the uploaded images */
    function show_all_images(relpath, file) {
      console.log("showing", relpath);
      if (file.dir) {
        return file.forEach(show_all_images);
      }
      var img = document.createElement("img");
      img.alt = relpath;
      document.body.appendChild(img);
      file.async("blob").then(function(blob) {
        img.src = window.URL.createObjectURL(blob);
      });
    }
    new JSZip.loadAsync(content).then(zip => zip.forEach(show_all_images));
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/cryptico/0.0.1343522940/cryptico.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.2.0/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input id="chatImage" type="file" multiple="multiple" />

JSZip压缩图片上传、加密、解密、显示图片

JSZip compress image upload, encrypt, decrypt, display image

javascript

compression

file-upload

jszip

cryptico