Question

我有一张有两张图片的表格：

enter image description here

我配置了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像素。我该怎么做？

谢谢！

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）为数据属性添加宽度/高度

我修改了两个＆lt; input type =“file”＆gt;标签包括用于将图像大小调整为数据属性的宽度和高度，如下所示：

<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数组的值overrode 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');
        });

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

使用transloadit，如何将两个图像调整为不同的大小？

1 个答案: