2

システムにJcropを実装しましたが、今のところ問題なく動作しています。しかし、最近 1 つの小さな問題が見つかりました。

シナリオ

当社の Web サイトでは、ユーザーが会社のロゴをアップロードできます。アスペクト比の要件は です200/150。残念ながら、ユーザーの会社のロゴは次のようになります (200 x 63 ピクセル)。

200x63

ユーザーが画像をアップロードすると、アスペクト比の制約により、次のように表示されます。

ここに画像の説明を入力


質問: 画像の全幅または全高に切り抜くにはどうすればよいですか? jcrop が負のクロッピング ディメンションをサーバーに送り返すかどうかは気にしません。画像を白い背景で埋めるのに十分スマートなはずだからです。最終的に予想される画像は次のようになります。

ここに画像の説明を入力

(背景はコントラストのために陰影を付けています)

jcrop で実行できますか、それとも使用できる代替ソリューション/プラグインはありますか?

4

5 に答える 5

2

200/150彼がアップロードした画像ではなく、中央にアップロード画像をロードして表示するボックス(または他の寸法ですが、このw / h比)でクロップツールを表示する必要があります。

于 2013-04-12T08:04:29.570 に答える
1

これを行うには、ユーザーが固定縦横比から任意の縦横比に動的に変更できるラジオ ボタンを設定し、ユーザーが写真の領域全体を選択できるようにします。

サーバーは、スクリプトが正しく設定されている場合、写真を引き伸ばすのではなく、空白スペースを白で自動充填することにより、トリミングされた写真の結果をロゴの設定された最終的な寸法と縦横比に強制的にサイズ変更できます。

于 2013-04-12T22:06:09.813 に答える
1

トリミングの主な目的は、画像から関連するコンテンツを適切なアスペクト比で取得することです。ただし、縦横比の制限によって画像データが失われる場合は、パディング ソリューションを使用するのが正解です。

次のプロセスに従います。

  1. ユーザーに画像をアップロードさせてから、アップロードされた画像をトリミングできる page#2 を表示します。
  2. 1 ページ #2​​ :
  3. リスト項目

    (a) JavaScript を使用して、アスペクト比 200:150 の長方形が画像上でカバーできる面積を計算します。

    (b) この領域が 90% (または任意の値) を超える場合、ユーザーがトリミングできるようにすると、アスペクト比の要件に準拠した関連する結果が得られます。

    (c) この 200px x 63px の画像のように、面積が 90% 未満の場合は、アスペクト比の JavaScript 変数を変更し、画像のアスペクト比 (たとえば 200:65) と正確に/ほぼ等しくします。このようにして、ユーザーはロゴからより完全な部分を切り取ることができます。

    (d) バックエンド スクリプトで、ケース (b) またはケース (c) を確認します。(b) の場合は、画像処理ライブラリを使用して、トリミングされた画像を生成するだけです。(c) の場合は、縦横比 200:150 (目的の比率) の白い長方形を作成し、(c) でトリミングして生成された画像を重ねると、目的の結果が得られます。

このようにして、両方のケースがカバーされます。また、これはユーザーを混乱させるものではありません。ユーザーは、ロゴの最適な部分を選択するためにトリミングが行われ、UI を均一にするために白いパディングが行われたことをよく理解するでしょう。

于 2013-04-12T07:56:14.740 に答える
1

スクリプトのサーバー側の部分で画像をどのように切り取るかはわかりませんが、「画像全体を使用」というボタンを追加することで、投稿データ (x、y、幅、高さ)画像のフルサイズになります。次に、比率が予想よりも高い場合は、いつもと同じサイズで画像を作成し、幅で画像のサイズを変更して、新しい画像の中央に配置します. したがって、次のコードは、私が話していることを示すための「疑似コード」にすぎません。ユーザーが 1000px * 200px の画像をアップロードしたいとしましょう。必要な比率は 200px * 150px です。ユーザーは「フル画像サイズ」を選択するので、0,0,1000,200 (位置: 0,0、幅/高さ: 1000, 200) のようなデータを送信します。サーバー側では、必要なすべての計算を行うことができます。

$width = $_POST['width'];
$height= $_POST['height'];
$fullsize = isset($_POST['fullsize']) && $_POST['fullsize']; // If the full size mode is on.
if ($fullsize) {
  $image = new Image(0,0,200,150); // Create the image canvas with whatever plugin your using.
  if (($width/$height) > (200/150)) { // If WIDTH ratio is higher...
    $x = 0; // We already know the image will be align on the left because of the previous calculations (ratio)
    $y = (150/2) - ($height/2); // 50% top - half the image size = center.

  }
  if (($height/$width) > (150/200)) { // If HEIGHT ratio is higher...
    // Repeat previous code with adjusted values for height instead of width.
  }
  // The next part is pure fiction, i dont know what php extension you use, but lets pretend this is working.
  $newImage = new Image($x,$y,$width,$height,$file); // $file is probably the $_FILEs...
  $image->placeInsideCanvas($newImage); // Imagine this adds the image into your previously created canvas (200/150);
  $image->output();
}

これが役に立てば幸いです。

于 2013-04-16T17:03:03.010 に答える
0

jcrop には明示的なサイズ変更方法はありませんか? jcrop API で見たのを覚えています。

$.Jcrop( '#box', { trueSize: [ w, h ] });

これでクロップ率をオーバーライドできるかどうかはわかりませんが、試してみる価値はあります。

于 2013-04-16T17:40:40.333 に答える