thadeu / resize-image-to-fit

Redimensionamento de Imagens com Javascript no Client

Resize ImageToFit with Javascript

Para testar, abra o arquivo index.html, selecione as imagens e aguarde o redimensionamento. Pode ser usado em várias imagens.

yarn add resize-image-canvas@latest

or

npm install resize-image-canvas@latest

How to use

<form method="post" class='form'>
    <div class="field">
      <input type="file" name="file[]" id="file" class="input-files" multiple> 
      <label for="file">Selecione os arquivos</label>
    </div> <br>

    <div class="field">
      <button type="submit" class="resize-action btn btn-primary">Iniciar</button>
    </div>
  </form>
</div>

<div class="previews"></div>

window.onload = function(){
  /**
   * Evento de Click
   */
  document.querySelector('.resize-action').addEventListener('click', function(e){
    e.preventDefault();

    // using Array fro files
    new FileResize({
      boxPreview: document.querySelector('.previews'), 
      files: document.querySelector('.input-files').files, 
      width: 200, 
      height: 200,
      loading: 'carregando...' // (opcional)
    })
  })
}

Exemplo

Library Resize Image Canvas

Contributing

Bug reports and pull requests are welcome on GitHub at https://github.com/Thadeu/resize-image-to-fit