Заставить пользователя обрезать/загрузить изображение до определенного размера? Предпочтительно использовать filepicker

Question

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

Я пробовал эту страницу: https://www.filepicker.com/documentation/file-ingestion/widgets/pick?v=v2, и я пробовал различные варианты, но ничего, похоже, не работает.

data-fp-image-min не мешает пользователям загружать более мелкие изображения. data-fp-crop-force вместе с data-fp-crop-max и data-fp-crop-min тоже не делает этого.

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

Я использую рельсы кстати.

Answer 1

От docs:

данных FP-изображения мин - изображения меньше, чем указанные размеры будут широких масштабах до минимального размера.

Таким образом, это действительно не мешает пользователям загружать более мелкие изображения.

data-fp-crop-max и data-fp-crop-min задает максимальный и минимальный размеры области обрезки, чтобы он не дал вам конкретных измерений.

Я бы порекомендовал вам:

1. Набор данных FP-культур отношение - Указать высоту посевные площади к ширине. Пользователь сможет настроить область обрезки для каждой фотографии с нужным соотношением.
2. Set data-fp-crop-force = "true" - Пользователь не может пропускать изображение обрезки.
3. Затем измените размер изображения на определенную высоту или ширину.

Это приведет к тому, что вы всегда получите изображение с требуемыми размерами.

Пример 150 х 200 вывода изображения: Html виджет:

<input type="filepicker" 
data-fp-crop-ratio="3/4" 
data-fp-crop-force="true" 
mimetype="image/*" 
onchange="window.upload(event)" 
data-fp-apikey="APUGwDkkSvqNr9Y3KD4tAz" /> 

Javascript:

window.upload = function(event){ 
    console.log(JSON.stringify(event.fpfile)); 
    var listElem = document.createElement("li"); 
    var image = document.createElement("img"); 
    /* 
     set w=150 (width) conversion option 
     so all images would be 150x200 
     and crop_first option to make sure the image is cropped 
     before any other conversion parameters are executed. 
    */ 

    image.setAttribute('src', event.fpfile.url + '&w=150&crop_first=true'); 
    listElem.appendChild(image); 
    document.getElementById('results').appendChild(listElem); 
}; 

Здесь рабочий раствор: http://jsfiddle.net/krystiangw/9o9ebddL/