jquery-plugins - 如何使用 fengyuanchen 裁剪器处理多张图像

Question

我正在使用 fengyuanchen cropper 库创建图像裁剪器，它也可以工作，但我想将它用于多个图像，如下面的截图但是我很难重新初始化这个插件，因为它只支持一个 avata 图像.

Answer 1

CropperJs 支持该功能。你可以像这样在javascript中做到这一点：

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

此代码片段可以在官方 Github 存储库中找到 https://github.com/fengyuanchen/cropperjs/blob/35c6ce5bc345317c1acfb39e1ceab8af6dee1247/examples/multiple-croppers.html