Как работать с масштабными и большими изображениями в Cropper.js?

Я пытаюсь использовать Cropper.js, чтобы позволить пользователю обрезать большие изображения - изображения обычно больше 3000x3000 пикселей.

Когда изображение загружается в мой элемент div, оно масштабируется до 1024 пикселей в ширину. В моем тестовом случае исходное изображение имеет размер 4032x2268, поэтому в браузере оно 1024x576.

методы getCropBoxData () и getCanvasData () возвращают значения x, y, ширины и высоты выбранной области, подлежащей обрезке, но они представляют ее относительно масштабирования изображения 1024x576, а НЕ для фактического изображения в его исходном виде. размер.

Я попытался написать процедуру преобразования, чтобы определить значения шкалы X и Y и преобразовать соответствующим образом, но она работает неправильно.

На этом этапе я решил разместить здесь сообщение и посмотреть, есть ли способ попроще. Cropper.js, похоже, имеет значение scaleX и scaleY, возвращаемое в методе getImageData (), но это не работает так, как я надеялся.

Кто-нибудь знает, как я могу с этим справиться?


person RobG    schedule 17.05.2017    source источник


Ответы (1)


Я понял. Вот в чем дело. Значение "y", возвращаемое методом getCropData (), неверно. Значение «x» тоже может быть неправильным, но я не уверен на 100%. В итоге я вытащил значения x и y из метода getData (), и это сработало. Надеюсь, это когда-нибудь поможет кому-нибудь!

person RobG    schedule 17.05.2017