Resize Image to Canvas

How to install lib

yarn add resize-image-canvas@latest

or

npm install resize-image-canvas@latest

Using ES5/ES6,ES7,ES*

import FileResize from 'resize-image-canvas'

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)
      callback: function(){
      }
    })
  })
}

Using VanilhaJS or jQuery

Get to files with clone repo https://github.com/Thadeu/resize-image-canvas After load file resize-image-canvas in your assets project path, so!

<script src="resize-image-canvas.min.js"></script> 

After use lib

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

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

$('.resize-action').on('click', function(e){
    e.preventDefault();
    
    // using Array fro files
    new FileResize({
      boxPreview: $('.previews'), 
      files: $('.input-files').files, 
      width: 200, 
      height: 200,
      loading: 'carregando...', // (opcional)
      callback: function(){
      }
    })
  })
}

Exemplo

See you exemple here! Exemple Project using VanilhaJS

Contributing

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