8

私はJcropを広範囲に使用してきましたが、Facebook がカバー画像のトリミングに使用するのとほぼ同じ方法で画像をトリミングしたいと考えています。

したがって、divを固定サイズにして、背景に元のサイズのドラッグ可能な画像を保持し、ユーザーがドラッグしてトリミングする適切な可視領域を見つけます。

私が学んだことから、JCropでは、元の画像は固定サイズであり、ドラッグ可能な領域はトリミングしたいその上を移動します.私はちょうど反対が欲しい. 画像をドラッグ可能にし、選択領域を固定します。

JCrop を使用してそれを行う方法はありますか?

編集: 回答を投稿してからしばらく経ちましたが、他の回答はより良い方法で役立ちます。それをチェックしてください

4

3 に答える 3

10

Facebook のように画像を切り取る (領域内でドラッグする) には、ギロチン( demo ) を使用することを強くお勧めします。

非常に軽量なプラグインで、画像のトリミング、ズーム、回転が可能です。タッチもサポートしており、応答性があります (流動的です)。トリミングなどの Facebook に最適で、セットアップも非常に簡単です。

于 2014-08-03T19:49:29.540 に答える
6

私はしばらくこれを探していましたが、別の素晴らしいプラグイン - JWindowCropを手に入れました

また、リポジトリからプラグインを取得することもできます。

プラグインは非常にシンプルで、必要に応じて簡単に変更できるという利点があります。

Facebookカバーのトリミング領域に一致させる方法は次のとおりです。

HTML:

<img id="target" class="crop" alt="" src="images/sample-cover.jpg" />

JavaScript:

$('.crop').jWindowCrop({
                targetWidth: 851, //Width of facebook cover division
                targetHeight: 315, //Height of cover division
                loadingText: 'Your Cover is uploading....',
                onChange: function(result) {
                    console.log("separation from left- "+result.cropX);
                    console.log("separation from top- "+result.cropY);
                    console.log("width- "+result.cropW);
                    console.log("Height- "+result.cropH);
                }
            });

プラグインに満足できない場合は、内部リージョンを変更できます。

注: Facebook カバーは幅 851px のみであるため、アップロードされた画像とクロッパー セクションは同じ幅、つまり 851px である必要があります。

ここにDEMOを用意しました

編集: カバー内の画像をドラッグしているときにトリミング領域(左上側)に「ドラッグして再配置」というテキストに気付いた場合に備えて、プラグインの次の行を変更することで、自分のテキストに言及できます:

 Line:34-   base.$frame.append('<div class="jwc_controls" style="position:relative;display:'+(base.options.showControlsOnStart ? 'block' : 'none')+';"><span class="dragger">Drag to reposition</span></div>');

そのためのオプションをプラグインに追加する時間がありませんでした。

于 2013-11-21T17:02:48.400 に答える
1

Facebook のカバー画像のような画像をアップロードするには、このプラグインを使用します facebook-style-cover-image-reposition

于 2015-03-03T06:38:53.173 に答える