Search code examples
jquerycropper

how to use jQuery Cropper for multiple images

I'm creating the the image cropper by using fengyuanchen's jQuery Cropper library. It works well, but I want to use it for multiples images as the below screenshot But it's difficult for me to reinitialize this plugin because it support only one avatar image.

Solution

  • The same author's vanilla JS library, Cropper.js supports that feature. You can do it in vanilla JavaScript like this:

    <script>
    window.addEventListener('DOMContentLoaded', function () {
      var images = document.querySelectorAll('img');
      var length = images.length;
      var croppers = [];
      var i;
      for (i = 0; i < length; i++) {
        croppers.push(new Cropper(images[i]));
      }
    });
</script>

    This code snippet could be found on the official GitHub repository for Cropper.js:

    https://github.com/fengyuanchen/cropperjs/blob/35c6ce5bc345317c1acfb39e1ceab8af6dee1247/examples/multiple-croppers.html