Использование 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}" 
    } 
    } 
} 

И мой браузер:

<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 resize/обрезать оба оригинальных изображения до нужного размера. Первичное изображение должно быть 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" 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, я overrode ширину resize_optimal и высоту, используя значения из resize_options массив:

До:

  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'); 
     }); 

Вот оно! Теперь оба изображения будут правильно изменены.