0

これは一種のオープンエンドの質問であることを認識しているため、ここで質問すべきではない場合はお詫びしますが、私は ajax が初めてで、自分がやろうとしていることを理解するのに苦労しています。これは、私が達成しようとしている基本的なフロー/プロセスです。

  1. ユーザーは、単純な html フォームでアップロードするファイルを選択します。

  2. ファイルを選択すると、選択した画像を表示する新しいファンシーボックスが開き、jquery プラグインでトリミングできるようになります。

  3. Crop ボタンを押すと、画像がトリミングされます。Fancybox が閉じ、新しいトリミングされた画像がプレビュー エリアの元の html フォームに表示されます。

私が頭を悩ませているのは、トリミングされた画像をフォームに送り返し、ページをリロードしたり、既に入力されている可能性のある他のフォームデータを失うことなく表示する方法です。ajax を使用して、トリミング ファイルが何らかの方法で送信されたかどうかを確認できますか? クロッピング情報を保存するためにセッション変数を使用する必要がありますか? ヘルプやガイダンスをいただければ幸いです。

4

1 に答える 1

1

これに対する答えは、実際にトリミングするか、単にトリミングするかによって異なります。

真のトリミングはより複雑で、次のようなことを行う必要があります。

var ctx_src = document.getElementById("someCanvasElement").getContext('2d');
var ctx_dest = document.getElementById("clippedDestinationCanvas").getContext('2d');
var img = new Image();
img.src = "/path/to/image";
img.onload(
  function()
  {
    ctx_src.drawImage(img,0,0);
    //capture a bounding rect from the user
    //draw the image to a new canvas, cropped to the bounding rect
      //see: http://www.w3schools.com/tags/canvas_drawimage.asp
    ctx_dest.drawImage(img,crop_x,crop_y,crop_width,crop_height,0,0);
    //display the destination canvas whereever you want, ie, in jquery do:
    $("#clippedDestinationCanvas").show(); // or fadeIn() or whatever
  });

上記の唯一のややこしい部分はクリッピング領域のキャプチャですが、それはそれほど難しいことではありません。基本的には、マウスダウンハンドラーを追加し、デルタxとデルタyの追跡を開始し、バウンディングボックスをオーバーレイとして描画します。

最終的には次のようになります。

var dragging;
var startx, starty;
var width, height;
$("body").on("mouseup", 
  function() 
  {
    if(dragging)
    { 
      dragging=false; 
      $("#someCanvasElement").off("mousemove");
    }
  });

$("#someCanvasElement").on("mousedown",
  function(evt)
  {
    dragging=true;
    startx = evt.pageX;
    starty = evt.pageY;
  });

$("#someCanvasElement").on("mousemove",
  function(evt)
  {
     width = evt.pageX-startX;
     height = evt.pageY-startY;
     //set the style to whatever looks good
     ctx_overlay.fillRect(startx, starty, width, height);

  });

実際に画像をトリミングせずにこれを行うには、クリッピング領域の境界ボックスをキャプチャするために同じマウスハンドラーを実行し、CSSを使用して画像をクリップします。

もちろん、これはすべて私の頭のてっぺんから外れているので、それに合わせて変更しますが、始めるには十分なはずです。

于 2013-02-04T23:44:51.127 に答える