【解決】dropzone.js でサムネイル画像が正方形になってしまう問題→元画像の縦横比(ratio)でサムネイルを表示する方法

dropzone.js では、サムネイル画像の縦横比がスクエア（正方形）になってしまう。

というか、ピクセル数でしか指定できない。

縦長か横長か、どちらが長いか確定している場合

長い辺が確定している場合は、長い方を最大値にすることはできるようだ。

オプションを下記のように指定する。

 var myDropzone = new Dropzone('div#dropImages', { 
      thumbnailWidth: null,
      thumbnailHeight: 300
 }

または　縦横が逆のときは下記。

      thumbnailWidth: 300,
      thumbnailHeight: null

しかし、どちらが長辺か確定していない場合は、記述がなかった。

どちらが長辺か確定していない場合

後記の参考URLにあった例をもう少しいじって、
オプション内で手動で計算したらできた。

長辺が300pxになる例。

 var myDropzone = new Dropzone('div#dropImages', { 
      previewsContainer: ".dropzone-previews",
      acceptedFiles: "image/png,image/jpeg",
      maxFilesize: 10,
      thumbnailWidth: 300,
      thumbnailHeight: 300,
      resize: function(file) { // thumbnail keep image ratio
        var resizeInfo = {
            srcX: 0,
            srcY: 0,
            trgX: 0,
            trgY: 0,
            srcWidth: file.width,
            srcHeight: file.height,
            trgWidth: (file.width>file.height?this.options.thumbnailWidth:this.options.thumbnailWidth*(file.width/file.height)),
            trgHeight: (file.width>file.height?this.options.thumbnailHeight*(file.height/file.width):this.options.thumbnailHeight),
        };
        return resizeInfo;
      }
    })

無事解決した。

私の３時間の集中力がみんなの時短につながりますように。

参考url)
https://stackoverflow.com/questions/22740117/dropzone-resize-function
上記URL内に追記する権限がなかったため、qiitaこちらに記載することにした。