【问题标题】:Filepicker IO how to specify a minimum width and hight in uploadFilepicker IO如何在上传中指定最小宽度和高度
【发布时间】:2015-04-15 00:25:44
【问题描述】:

我希望能够为通过 FilePicker 上传对话框上传的图像设置最小宽度和高度(最小尺寸:1200 x 960 像素)。

理想情况下会有一个选项,但我似乎找不到它。

【问题讨论】:

  • 你考虑过文件上传js插件吗?他们很容易做到这一点。

标签: javascript filepicker.io filepicker


【解决方案1】:

虽然我们没有根据图片尺寸限制上传的方法,但我们确实在 2015 年 5 月添加了在上传时调整图片大小的功能。

以下参数控制此行为:

这些功能适用于从您的计算机中挑选的本地文件和使用网络摄像头服务捕获的图像。

图片尺寸

{imageDim: [宽度, 高度]}

指定图像尺寸。例如: {imageDim: [800, 600]}。在上传之前,本地图像将被调整(放大或缩小)到指定的尺寸。保持原来的高宽比。要根据宽度调整所有图像的大小,请设置 [width, null],例如。 [800,空]。对于高度设置[null, height],例如[null, 600]。

最大图像尺寸

{imageMax: [宽度, 高度]}

指定最大图像尺寸。例如: {imageMax: [800, 600]}。大于指定尺寸的图像将被调整为最大尺寸。

最小图像尺寸

{imageMin: [宽度, 高度]}

指定最小图像尺寸。例如: {imageMin: [800, 600]}。小于指定尺寸的图片将被放大到最小尺寸。

注意:客户端调整大小依赖于打开的对话框。如果用户使用下拉窗格功能(意味着不打开模式对话框窗口)上传他们的图像,他们的图像将不会被修改。

【讨论】:

    【解决方案2】:

    Filestack 确实提供了一个选择器选项来设置回调onFileSelected。这是他们网站上tutorial 的示例:

    function checkImgSize (file) {
      return new Promise(function (resolve, reject) {
        const maxWidth = 1300;
        const maxHeight = 1300;
        const blob = file.originalFile;
    
        // Get an object URL for the local file
        const url = URL.createObjectURL(blob);
    
        // Create an image and load the object URL
        const img = new Image();
        img.src = url;
    
        img.onload = function () {
          URL.revokeObjectURL(url);
    
          if (this.naturalWidth > maxWidth) {
            reject('File is too wide');
          }
    
          if (this.naturalHeight > maxHeight) {
            reject('File is too tall');
          }
    
          // If we made it here then the file was approved
          resolve();
        }
      });
    }
    
    const picker = client.picker({ 
      exposeOriginalFile: true,
      onFileSelected: checkImgSize,
    });
    

    【讨论】:

      猜你喜欢
      • 2017-12-08
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2010-12-18
      • 2022-08-19
      • 2010-12-28
      相关资源
      最近更新 更多