Jump to content
Fórum Script Brasil
  • 0

Diminuir tamanho imagem antes de fazer upload pro servidor


Question

Olá, pessoal!

Preciso diminuir o tamanho em bytes e em pixels de imagens antes de upar pro servidor. No entanto, só estou conseguindo exibir as imagens já alteradas mas, ao enviar para o servidor, a imagem que vai é a original, do computador, não alterada. Veja:

HTML:

<input type="file" name="file" id="file" accept="image/*">
<img class="img-responsive" id="image-preview" src="" alt="foto">

JAVASCRIPT:

const compress = new Compress()
const preview = document.getElementById('image-preview')
const upload = document.getElementById('file')

upload.addEventListener('change', (evt) => {
  const files = [...evt.target.files]
  compress.compress(files, {
    size: 4,
    quality: 0.75, 
    maxWidth: 1280, // the max width of the output image
    maxHeight: 720, // the max height of the output image
    resize: true 
  }).then((images) => {

    const img = images[0]
    // returns an array of compressed images
    preview.src = `${img.prefix}${img.data}`    
  })
}, false)

No Javascript acima as imagens são convertidas para 1280x720 com até 2MB. O preview mostra a imagem já convertida (ao "salvar como" o tamanho em byte e dimensões estão ok). Somente quando envio pro servidor é que a imagem vai "crua", ou seja, sem a conversão.

Preciso muito resolver esse problema.

Link to post
Share on other sites

0 answers to this question

Recommended Posts

There have been no answers to this question yet

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.



  • Forum Statistics

    • Total Topics
      149405
    • Total Posts
      645894
×
×
  • Create New...