1

我有一个表格，上面有两张图片：

在此处输入图像描述

我已经配置了 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>

还有我的一些刀片模板/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 像素。我该怎么做呢？

谢谢！

4

1 回答 1

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 绑定中，我使用 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');
        });

而已！现在两个图像都将正确调整大小。

于 2015-02-04T17:41:17.577 回答