jCrop: установите квадратное выделение (по центру) загруженного изображения любых размеров.

Я хотел бы предложить своим пользователям возможность обрезать загруженное изображение с помощью jCrop. В результате должен получиться квадратный формат. Выделение должно располагаться по центру изображения, с промежутком примерно 10 % по обеим сторонам по кратчайшему измерению. Текущий код:

        jcrop_api = $.Jcrop('#imgCrop', {
            onSelect:    storeCoords,
            onChange:    storeCoords,
            aspectRatio: 1
            setSelect:   [20, 20, 280, 280]
        });

поэтому вместо жестко заданных значений мне нужен способ установить значения x1, y1, x2, y2 в правильные позиции.


person BarryF    schedule 22.09.2011    source источник


Ответы (1)


Используйте координаты из вашего метода предварительного просмотра в качестве параметров для массива:

 jcrop_api = $.Jcrop('#imgCrop', {
        onSelect:    storeCoords,
        onChange:    storeCoords,
        aspectRatio: 1
        setSelect:   [ ($('#imgCrop').attr('width') / 2) - 10, 
                       ($('#imgCrop').attr('height') / 2) - 10, 
                       ($('#imgCrop').attr('width') / 2) + 10, 
                       ($('#imgCrop').attr('height') / 2) + 10 
                     ]
        });

Потребуется некоторое количество проб и ошибок, чтобы найти шаблон и заставить его работать стабильно.

person Paul Sweatte    schedule 14.09.2012