Javascript 如何使用compress.js进行多重图像压缩、预览和上传？

我一直在使用单图像上传。但是，现在我想把它用于多个图像上传

我想要实现的是从html输入元素中选择多个图像，然后使用这个库对其进行压缩，并在动态生成的标记中预览这些压缩的图像

像这样：-

..取决于所选图像的数量

这就是我如何使用它进行单幅图像上传

在过去的两天里，我一直在努力实现这一目标。 我试着在for循环中运行这个

请大家帮帮我。我是javascript领域的初学者，但我想为我自己的一个项目做这件事

---

谢谢

大多数图像格式（如.jpg）都已压缩。也许你的意思是缩放，图像变小了？如果压缩和解压jpg，它将减慢处理速度，并几乎不节省带宽。这个compress.js api在客户端工作，因此它与带宽无关。此外，它在很大程度上减少了任何图像的文件大小，从而节省了大量带宽和上载时间。我用一个10MB大小的图像测试了这个api，结果令人难以置信，在质量损失最小的情况下减少到150KB左右。如今，任何智能手机上的图像平均文件大小都在4-6MB左右，如果不进行压缩就上传到服务器上，会占用太多带宽，上传时间也会很长。此api将这些图像的大小减少到60-70 KB左右，同时最大限度地减少了数据丢失quality@RickJames我不熟悉JS中的常量和对象。所以我在传递多个图像和存储压缩图像时遇到了问题。对不起，我被那个软件包对compress这个词的误用弄糊涂了。这似乎是一个图像缩放包。当然，文档中的示例从太大缩小到太小，从而将磁盘大小缩小了98%。我没办法回答你的问题。

<input type="file" accept="image/*"   id="image">
<img id="preview">

const options = {
  targetSize: 0.2,
  quality: 0.75,
  maxWidth: 800,
  maxHeight: 600
}

const compress = new Compress(options)
const upload = document.getElementById("image")

upload.addEventListener(
  "change",
  (evt) => {
    const files = [...evt.target.files]
    compress.compress(files).then((conversions) => {
      // Conversions is an array of objects like { photo, info }.
      // 'photo' has the photo data while 'info' contains metadata
      // about that particular image compression (e.g. time taken).

      const { photo, info } = conversions[0]

      console.log({ photo, info })

     // was using this to append to the form data
      newblob = photo.data;

      // Create an object URL which points to the photo Blob data
      const objectUrl = URL.createObjectURL(photo.data)

      // Set the preview img src to the object URL and wait for it to load
      Compress.loadImageElement(preview, objectUrl).then(() => {
        // Revoke the object URL to free up memory
        URL.revokeObjectURL(objectUrl)
      })
    })
  },
  false
)

$(function() {

    var imgPreviewUpld = function(input, divId) {

        if (input.files) {
            var numberOfImages = input.files.length;

            for (i = 0; i < numberOfImages; i++) {




                $($.parseHTML('<img>')).attr({id : "preview"+i, class:"img-fluid"}).css({"max-height":"200px","max-width":"300px"}).appendTo(divId);

                               const options = {
                                    targetSize: 0.2,
                                    quality: 0.75,
                                    maxWidth: 800,
                                    maxHeight: 600
                                        }
                                        const compress = new Compress(options)


                                const files = [...input.files]
                                                // const files = [evt.files];
                                compress.compress(files).then((conversions) => {
                                // Conversions is an array of objects like { photo, info }.
                                // 'photo' has the photo data while 'info' contains metadata
                                // about that particular image compression (e.g. time taken).

                                const { photo, info } = conversions[0]

                                console.log({ photo, info })

                                //to append to the form data
                                newblob+i = photo.data;
                                // Create an object URL which points to the photo Blob data
                                const objectUrl = URL.createObjectURL(photo.data)

                                // Set the preview img src to the object URL and wait for it to load
                                Compress.loadImageElement(preview+i, objectUrl).then(() => {
                                    // Revoke the object URL to free up memory
                                    // URL.revokeObjectURL(objectUrl)
                                })
                                })                               

            }




        }

    };

    $('#image').on('change', function(evt) {
        imgPreviewUpld(this, 'div.previewdiv');




    });
});