cropper.js Создать область обрезки вокруг левого клика?

Question

У меня есть cropper.js, работающий хорошо, когда пользователь щелкает и перетаскивает область изображения.

Как я могу сделать cropper.js обрезать область изображения, когда пользователь просто нажимает на часть изображения?

Например, где бы пользователь ни щелкнул, вокруг этой позиции x, y будет создана область размером 50x50.

В настоящее время я могу использовать метод.setCropData(), чтобы установить положение и размеры рамки обрезки, но я могу заставить его "выстреливать" только как часть события cropend.

Событие cropstart кажется идеальным местом для этого, поскольку оно захватывает первоначальное событие mousedown, но я не могу заставить метод setCropData () запускаться как часть этого события.

Из того, что я могу сказать, для того, чтобы cropper.js мог что-либо делать, он должен проходить через цепочку событий: от начала обрезки до обрезки, а затем, в конечном итоге, до обрезки. Это означает, что мышь нужно перетаскивать в каком-либо направлении. Если пользователь просто щелкнет мышью и все, без дальнейшего перемещения, будет запущено только событие cropstart.

Например, что-то простое для целей тестирования, это не работает:

    cropstart: function(event) {
      let $canvas = $('#canvas-' + $cropperImageIdNumber);

      cropperInstance.setCropBoxData({left: 100, top: 100, width: 50, height: 50});

      console.log('cropstart CropBoxData');
      console.log(cropperInstance.getCropBoxData({}));
    },

После щелчка мышью в журнале консоли отображается, казалось бы, пустая cropBoxData, и на изображение не рисуется обрезка. Я подозреваю, что это потому, что без технически начатого события обрезки нечего устанавливать.

Однако, если я возьму ту же самую вещь и добавлю ее как часть события cropend, она будет работать, как и ожидалось. Разница, однако, в том, что я не могу просто "щелкнуть", а должен перетащить поле обрезки любого размера:

    cropend: function(event) {
      cropperInstance.cropped = true;

      let $canvas = $('#canvas-' + $cropperImageIdNumber);
      cropperInstance.setCropBoxData({left: 100, top: 100, width: 50, height: 50});

      console.log('cropend CropBoxData');
      console.log(cropperInstance.getCropBoxData({}));

Любые идеи, как я могу заставить кроппера "пройти через движения", устанавливая размеры вручную, но с помощью щелчка, а не обычного перетаскивания? Заранее спасибо!