web-dev-qa-db-ja.com

ドロップゾーンサイズ変更機能

http://www.dropzonejs.com/ を使用してドロップゾーンページを実装しました

サイズ変更機能に問題があります。アスペクト比が間違っていると、画像が常にトリミングされます。

私は2つのことを疑問に思っています：

  1. 写真をプレビュー要素に合わせる（ストレッチやトリミングではない）ようにドロップゾーンを構成できますか？.
  2. ドロップした後にプレビューのサイズを変更できますか（つまり、プレビューを小、中、大で表示できますか？.

私はcssを調整して2を実装しましたが、ドロップゾーンコードを使用するより良い方法があるかどうか疑問に思っています。

1の例は、誰かが持っている場合に非常に役立ちます。ありがとう、マット。

resizedropzone.js
12
user3237002

実際、プレビューは、オプションthumbnailWidthとthumbnailHeightの両方を明示的に指定した場合にのみトリミングされるようです。それ以外の場合、サムネイルのサイズを1つだけ指定するか、まったく指定しないと、指定したオプションthumbnailWidthまたはthumbnailHeightに従って画像全体のサイズが比例して変更されます。

例、1200x800画像ソースの場合：

// Resized preview (400x267)
var dp = new Dropzone(document.getElementById('dp'), {
    thumbnailWidth: 400,
    thumbnailHeight: null
}

// Resized preview (600x400)
var dp = new Dropzone(document.getElementById('dp'), {
    thumbnailWidth: null,
    thumbnailHeight: 400,
}

// Croped preview (400x400)
var dp = new Dropzone(document.getElementById('dp'), {
    thumbnailWidth: 400,
    thumbnailHeight: 400,
}

ただし、ソース画像の比率がわからず、プレビューをサイズ設定されたdivに合わせる必要がある場合は、dropzone.jsのresize関数を使用してください。 ドキュメント で説明されているように、複数の属性を持つオブジェクトを返す必要があります。サムネイルのサイズに応じてプレビューのサイズを変更する例を次に示します。

var dp = new Dropzone(document.getElementById('myDropzone'), {

    // Your dropzone options here...

    thumbnailWidth: 400,
    thumbnailHeight: 400,
    resize: function(file) {
        var resizeInfo = {
            srcX: 0,
            srcY: 0,
            trgX: 0,
            trgY: 0,
            srcWidth: file.width,
            srcHeight: file.height,
            trgWidth: this.options.thumbnailWidth,
            trgHeight: this.options.thumbnailHeight
        };

        return resizeInfo;
    }
});

これにより、ストレッチプレビューが表示されます。ただし、もちろん、ソース画像のサイズ、サイズ変更されたdivのサイズ、またはプレビューを希望どおりに表示するために必要なものに応じて、trgWidthとtrgHeightを把握できます。

6
Gui-Don

はい、できます。トリミングされていないサムネイルを取得するには、次の2つのことを行う必要があります。

  1. InitオプションでthumbnailWidthとthumbnailHeightを指定します。高さを固定する場合は、thumbnailWidthの値としてnullを渡します。幅を固定する場合は、その逆を行います。

  2. 次のようにdropzonecssをオーバーライドします。

    .dropzone .dz-preview .dz-image {width：auto！important;高さ：自動！重要; }

2
RunLoop

残念ながら、設定で切り抜きなしのオプションを指定する方法はありませんが、dropzone.jsを次のように変更することで、それを実現できました。お役に立てば幸いです。

この変更により、高さが固定されたアスペクト比が維持されます（幅が固定されるように変更できます）。

行117置換：

resizeInfo.trgWidth = _this.options.thumbnailWidth;

これとともに：

resizeInfo.trgWidth = img.width * (_this.options.thumbnailHeight / img.height);

そして1182行目置換：

ctx.drawImage(img, (_ref = resizeInfo.srcX) != null ? _ref : 0, (_ref1 = resizeInfo.srcY) != null ? _ref1 : 0, resizeInfo.srcWidth, resizeInfo.srcHeight, (_ref2 = resizeInfo.trgX) != null ? _ref2 : 0, (_ref3 = resizeInfo.trgY) != null ? _ref3 : 0, resizeInfo.trgWidth, resizeInfo.trgHeight);

これとともに：

ctx.drawImage(img, (_ref = resizeInfo.srcX) != null ? _ref : 0, (_ref1 = resizeInfo.srcY) != null ? _ref1 : 0, img.width, img.height, (_ref2 = resizeInfo.trgX) != null ? _ref2 : 0, (_ref3 = resizeInfo.trgY) != null ? _ref3 : 0, resizeInfo.trgWidth, resizeInfo.trgHeight);
1
Joaquín L. Robles

次のようにオプションを設定できるようです。

{
    thumbnailWidth: null,
    thumbnailHeight: null
}

また、Dropzoneはデフォルトで画像のサイズを変更します。

0
welbornio

拡大縮小されたサムネイルを取得するには、thumbnailWidthまたはthumbnailHeightのいずれかをnullとして設定します。

{
  thumbnailWidth: null,
  thumbnailHeight: "120"
}

次のCSSを適用します。

.dropzone .dz-preview .dz-image {
  width: auto !important;
  height: auto !important;
}

.dropzone .dz-preview .dz-image img{
  max-width: 100%;
}

レスポンシブウェブサイトの画像の最大幅は、狭い画面で画像を拡大縮小します。

0
Saeed

画像のアスペクト比を維持するために、@ Gui-Donの回答を少し変更しました。

thumbnailWidth: 400,
thumbnailHeight: 400,       
resize: function(file) {

        var thumbNHeight = this.options.thumbnailHeight;
        var thumbNWidth = this.options.thumbnailWidth;

        var ratio = 1;
        if (file.width > file.height) {
            ratio = (file.width / file.height);

            thumbNHeight = thumbNHeight / ratio;

        } else if (file.height > file.width) {

            ratio = (file.height / file.width);

            thumbNWidth = thumbNWidth / ratio;

        }

        var resizeInfo = {
            srcX: 0,
            srcY: 0,
            trgX: 0,
            trgY: 0,
            srcWidth: file.width,
            srcHeight: file.height,
            trgWidth: thumbNWidth,
            trgHeight: thumbNHeight
        };

        return resizeInfo;
}
0
bgth