Как использовать сжатие. js для многократного сжатия изображений, предварительного просмотра и загрузки? - PullRequest
Новая
       18

Как использовать сжатие. js для многократного сжатия изображений, предварительного просмотра и загрузки?

0 голосов
/ 18 апреля 2020

Я использовал компресс. js для загрузки одного изображения. Но теперь я хочу использовать это для нескольких загрузок изображений.

Чего я хочу добиться, это выбрать несколько изображений из html входного элемента, а затем сжать его с помощью этой библиотеки, а также предварительно просмотреть эти сжатые изображения в динамическом режиме. сгенерированный тег.

примерно так: -

<img id="preview0"> <img id="preview1"> <img id="preview2"> .... в зависимости от количества выбранных изображений.

Вот как я использовал его для загрузки одного изображения 

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

Я пытался добиться этого за последние 2 дня. Я пытался запустить это в течение l oop

<input type="file" accept="image/*" multiple id="image"> <div id="" class="col previewdiv"></div>

$(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');




    });
});

Пожалуйста, ребята, помогите мне. Я новичок в javascript мире, но я хочу сделать это для одного из моих собственных проектов.

Спасибо

...