javascript - 使用transloadit，如何将两个图像调整为不同的尺寸？

Question

我有一个表格，上面有两个图像:

我已配置 transloadit，以便一旦选择新图像，transloadit 就会创建缩略图，然后将缩略图和原始图像推送到 Amazon S3。

为了实现这一目标，我在我的 transloadit 帐户中创建了以下模板:

{
  "steps": {
    "thumb": {
      "use": ":original",
      "robot": "/image/resize",
      "width": 150,
      "height": 150,
      "resize_strategy": "pad",
      "background": "#ffffff"
    },
    "store": {
      "use": [
        ":original",
        "thumb"
      ],
      "robot": "/s3/store",
      "key": "...",
      "secret": "...",
      "bucket": "www.mydomain.com",
      "path": "staging/${file.id}.${file.ext}"
    }
  }
}

我的 JavaScript 是:

<script type="text/javascript">

    var json_data = {};

    $(function() {

        // Hack to stop form submit from re-uploading files
        // https://github.com/transloadit/jquery-sdk/issues/14

        var bindTransloadit = function(form) {
          form.transloadit({
            wait: true,
            modal: true,
            triggerUploadOnFileSelection: false,
            processZeroFiles: false,
            autoSubmit: false,
            params: {
                auth: {
                    key: "..."
                },
                template_id: '...'                 
            },
            onStart: function(assembly) {
              form.find('textarea[name=transloadit]').remove();
            },
            onUpload: function(upload) {
            },
            onCancel: function() { form.unbind('submit.transloadit'); },
            onError: function(assembly) { form.unbind('submit.transloadit'); },
            onSuccess: function(assembly) { form.unbind('submit.transloadit'); },
            onResult: function(step, result)
            {

                json_data[step] = {
                    "basename": result.basename,
                    "field": result.field,
                    "name": result.name,
                    "url": result.url,
                    "ssl_url": result.ssl_url
                };

                var fld_data = '#fld_' + result.field + "_data";

                $(fld_data).val(JSON.stringify(json_data));

                if(step == "thumb")
                {
                    $(fld_data).closest('.image-select').find('.thumbnail > img').attr('src', result.url);
                }
            }
          });
        };

        $('#landing-page-form').on('change', 'input[type="file"]', function() {
          var form = $(this).closest('form');
          bindTransloadit(form);
          form.trigger('submit.transloadit');
        });

    });
</script>

还有我的一些 Blade 模板/html，即使它可能只会混淆问题:

@foreach ($fields as $name => $properties)
@if ($properties['type'] == "image")
    <div class="form-group">
        <label class="col-sm-2 control-label">{{ $properties['label'] }}</label>
        <div class="col-sm-3">
            <div class="image-select">

                <!-- Thumbnail display -->
                <div class="thumbnail">
                  <?PHP if(array_key_exists('thumb', $data[$name . "_data"])) { ?>
                    <img src="<?PHP echo($data[$name . "_data"]['thumb']['url']) ?>" alt="">
                  <?PHP } ?>
                </div>

                <!-- Width/Height display -->
                <label>Width</label>: {{ $properties['width'] }} / <label>Height</label>: {{ $properties['height'] }}

                <input type="file" name="{{ $name }}" id="fld_{{ $name }}" />
                <textarea name="{{ $name }}_data" id="fld_{{ $name }}_data" class="hidden">{{ $data[$name . '_data']['json'] }}</textarea>

                @if ($properties['help_block'] != "")
                    <span class="help-block m-b-none">{{ $properties['help_block'] }}</span>
                @endif
            </div>
        </div>
    </div>
    <div class="hr-line-dashed"></div>
@endif 
@endforeach

到目前为止，一切都很好。但是，现在我想让 transloadit 将两个原始图像调整大小/裁剪为正确的大小。主图像需要为 300x150 像素，辅助图像需要为 200x200 像素。我该怎么做？

谢谢!

Answer 1

啊，我明白了。我是这样解决的:

1) 创建调整大小模板

在我的 transloadit 帐户中，我创建了此模板。最重要的是 resize_optimal 步骤。此步骤包含宽度和高度值“10”，但这些值将在执行该步骤之前被覆盖。

{
  "steps": {
    "thumb": {
      "use": ":original",
      "robot": "/image/resize",
      "width": 150,
      "height": 150,
      "resize_strategy": "pad",
      "background": "#ffffff"
    },
    "resize_optimal": {
      "use": ":original",
      "robot": "/image/resize",
      "width": 10,
      "height": 10,
      "resize_strategy": "pad",
      "background": "#ffffff"
    },
    "store": {
      "use": [
        ":original",
        "resize_optimal",
        "thumb"
      ],
      "robot": "/s3/store",
      "key": "...",
      "secret": "...",
      "bucket": "...",
      "path": "staging/${file.id}.${file.ext}"
    }
  }
}

2)为数据属性添加宽度/高度

我修改了两个 <input type="file"> 标签，以包含用于调整图像大小的数据属性的宽度和高度，如下所示:

<input type="file" name="primary_image" id="fld_primary_image" data-width="300" data-height="150" />
<input type="file" name="secondary_image" id="fld_secondary_image" data-width="200" data-height="200" />

3) 添加全局 resize_options 数组

我将以下全局数组添加到我的 JavaScript 中:

    var resize_options = {
        width: 200,
        height: 200
    };

4) 覆盖模板宽度/高度

在我的 transloadit 绑定(bind)中，我 overrode使用 resize_options 数组的值的 resize_optimal 宽度和高度:

之前:

            params: {
                auth: {
                    key: "..."
                },
                template_id: '...'                 
            },

之后:

            params: {
                auth: {
                    key: "..."
                },
                template_id: '...',
                steps: {
                    resize_optimal: {
                        width: resize_options.width,
                        height: resize_options.height
                    }
                }                 
            },

5) 填充 resize_options

在我的 JavaScript 中，只要文件输入发生变化，我就已经在运行代码了。这是添加代码以保持 resize_options 数组填充正确值的好地方:

旧:

        $('#my-form').on('change', 'input[type="file"]', function() {
          var form = $(this).closest('form');
          bindTransloadit(form);
          form.trigger('submit.transloadit');
        });

新:

        $('#my-form').on('change', 'input[type="file"]', function() {
          var form = $(this).closest('form');

          resize_options.width = $(this).data('width');
          resize_options.height = $(this).data('height');

          bindTransloadit(form);
          form.trigger('submit.transloadit');
        });

就是这样!现在两个图像都将正确调整大小。