Блог

во время проекта мне нужно настроить обрезку, связанную с распознаванием лиц. Распознавание лиц работает хорошо, но программа обрезки изменяет формат изображения с его объектом, координаты, возвращаемые facedetector, являются ложными. Знаете ли вы, как применить facedetector после изменения изображения с помощью интерфейса cropper?

   var image = document.getElementById('img');
  var cropper = new Cropper(image, {
    /*      aspectRatio: 9 / 16,*/
    // autoCrop: true,
    scalable: false,
    cropBoxResizable: false,
    guides: true,
    dragMode: 'none',
    preview: '.preview',
    data:{
      width: 250,
      height:  325,
    },
    crop: function(e) {
      $('#x').val(e.detail.x);
      $('#y').val(e.detail.y);
      $('#w').val(e.detail.width);
      $('#h').val(e.detail.height);
    },
  });
  $('#img').faceDetection({
    complete: function (faces) {
      console.log(faces)
      initx = faces[0].x;
      inity = faces[0].y;
      cropper.data({x:120,y:init});
    }
  });
  

Вероятно, вам нужно сначала получить координаты, а затем начать Cropper с этих координат, например:

 const img = $('img');
img.faceDetection({
  complete: function (faces) {
    initCropper(faces[0]);
  }
});

function initCropper(data) {
  cropper = new Cropper(img[0], {
    data
  });
}
  

https://jsbin.com/keruzal/edit?js , выходной