强制用户 crop/upload 将图像设置为特定大小？最好使用文件选择器

Question

我有用户使用文件选择器上传图片，但我希望他们必须上传特定尺寸的图片（如果图片太大则裁剪）。我可以自己剪，但这样看起来就不好看了。理想情况下，用户会自己裁剪它。

我试过这个页面：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。似乎这是其他人运行喜欢的东西。

我正在使用 rails 顺便说一句。

Answer 1

来自docs:

data-fp-image-min - Images smaller than the specified dimensions will be upscaled to the minimum size.

所以它并没有真正阻止用户上传较小的图片。

data-fp-crop-max 和 data-fp-crop-min 指定裁剪区域的最大和最小尺寸，因此它不会为您提供具体尺寸。

我建议您：

Set data-fp-crop-ratio - 指定裁剪区域的高宽比。用户将能够以所需比例调整每张照片的裁剪区域。
Set data-fp-crop-force="true" - 用户无法跳过裁剪图像。
然后将图像调整为特定的高度或宽度。

这样一来，您将始终获得具有所需尺寸的图像。

150 x 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/

强制用户 crop/upload 将图像设置为特定大小？最好使用文件选择器

Force user to crop/upload an image to a certain size? Preferably using filepicker

ruby-on-rails

image

filepicker.io