以下は、私が書いた写真の機能の紹介です。
マウスを使用して、トリミングボックスをドラッグして作成できます
作物のサイズを変更できます
[OK]をクリックして、クロップデータに戻ります
原理
トリミングを完了するには2つの方法があります。
1. html5を使用して、ドラッグイベントドラッグドロップなどを追加します
2。マウスイベント、ムーズダウン、マウスモーブなどの従来の方法。
ここでは、方法2を採用します。
クロップドエリアの形成
カットするには、最初に作物エリアを形成する必要があります。この作物エリアの形成は、マウスが動く距離に関連付けられます。マウスが動くほど、作物領域が大きくなります。下の図に示すように：
上記の図に示すように、マウスの水平方向の移動距離と垂直方向の移動距離は、一緒に作物領域の幅と高さを形成します。
そして、水平および垂直の動きの間の距離を計算する方法は？マウスをクリックすると、 eventイベントオブジェクトを介してマウスクリック位置を取得でき、マウスを移動すると、 eventでマウスの位置を取得できます。マウスの位置に2つの変化を通じて、マウスの動き距離を取得できます。
マウスの位置を取得するための属性はclientxとclientyです
日陰の領域の形成
次は、影の領域を描くことです。クロップドエリアを除く、トリミングされた画像の部分は影の部分に属し、その領域も描画できません。この領域は、ユーザーがクロップドエリアをより明確に見ることができるように描かれています。
エリアを4つの部分に分割しました。上、下、左、右、下の図の分布をご覧ください。
では、この領域が計算された場合はどうなりますか？現時点では、DOM要素のオフセット値を使用する必要があります。クリッピング領域の残りのオフセット値は、画像自体の左のオフセット値から差し引かれ、左影の幅です。クリッピング領域の上部オフセット値は、画像の上部オフセット値から差し引かれます。上部影の高さ値に等しくなります。下の図に示すように：
左の影と上の影の値を取得した後、他の影の特性をこれら2つで計算できます。
写真のオフセット値を取得するには2つの方法があります
1。offsetLeftおよびOffsettop値を使用することの短所DOM要素に境界マージンの等価値がある場合、これらの値はで計算されます
2。DOMのCSS属性を取得することの欠点は、左上部が定義されていない場合、事前定義されたCSSに関連する事前定義されたCSSです。
どちらの方法にも独自の欠点があり、さまざまな状況に応じて使用されます
境界のない収穫
作物領域の計算は、マウスの移動距離によって計算されるため、作物領域は範囲外になり、この状況は2つのタイプに分かれています。
1.切断プロセス中に境界を越えます
2。作物エリアを動かすときに境界を越えて行く
それでは、ラインの交差を防ぐ方法について話しましょう。
ライン上のトリミング
切断するときの国境とは何ですか？次の図に示すように、マウスの抗力領域は画像を超えて、外れを形成します。
このような境界外では、ブラウザの左側に比べて作物の右側が画像の右側とブラウザの左側の位置を超えることができないと判断する必要があります。同時に、ブラウザの上部に比べて作物領域の下部の位置は、画像の上部に対応するブラウザの上部の位置を超えることはできません。または説明するために：
TX >= PXの場合、txの値を固定値に強制します。
TxとPXの計算方法。作物エリアがoTailorあると仮定して、画像領域のoPicture ：
tx = otailor.offsetwidth + otailor.offsetleft; px = opicture.offsetwidth + opicture.offsetleft;
同様に、上記の方法を使用して、左側の交差、上側の交差、および下側の交差を制限できるため、詳細は説明しません。
境界を横切って移動します
外れていることは、収穫エリアが形成されたことを意味しますが、クロッピングエリアをマウスを通って移動すると、交差が発生します。この理解は比較的簡単なので、写真を描いても紹介しません。この種の国境を越えた制限は、DOMのドラッグアンドドロップクロスボーダーの制限と一致しており、マウスが画像領域を越えて移動するかどうかを判断することにより判断されます。
原則と問題は解決されており、実際の関数の完了を開始します。
準備
それを行う前に、最初に準備作業を行い、ナイフを磨き、木材の作業を遅らせることなく木材を刻みます。
Webページレイアウトの準備
Webページレイアウトのキーコードは次のとおりです。
<img src="./images/img_2.jpg"><div> <div></div> <div></div> <div></div> <div></div> <div id="box_1"></div> <div id="box_2"></div> <div id="box_3"></div> <div id="box_4"></div> <div id = "box_5"> </div> <div id = "box_6"> </div> <div div = "box_7"> </div> <div id = "box_8"> </div> <！ - left-> <div> </div> <！
img_box作物エリアを表す場所、 outer影の領域を表し、 img_boxのDIVは作物領域の境界線です
スタイルコントロールは次のとおりです。
* {パディング：0;マージン：0;} body {背景：＃454545; } .main {width：500px;マージン：50px auto;}。main img {width：500px;位置：絶対;左：450px;上：50px;}。img_box {overflow：hidden;位置：絶対;上：0px;左：0px; z-index：2;}。外側{オーバーフロー：hidden;背景：＃000;不透明：0.4;位置：絶対;上：0px;左：0px; z-index：0;}。box_border1、.box_border2、.box_border3、.box_border4 {ofacity：0.5;}。box_border1{background：url（./ border-anim-v.gif）repery左top;}。 top;}。box_border3 {background：url（./ images/border-anim-v.gif）Repecy right-y right top;} .bockes_border4 {backgrues：url（./ images/border-anim-h.gif）Repre-X右国境：1pxソリッド＃000;不透明度：0.5;}。高さ：35px;}レイアウト効果は次のとおりです。
一般的な機能
上記の原則を通じて、画像のトリミングを完了した後、多数のタグオブジェクトとタグのCSS属性などを取得する必要があることがわかります。そうすれば、これらの値をより適切に取得するために一般的な関数を記述できます。次のように：
DOMは関数を取得します
/ * get */function $（dom）{function getdom（dom）{var str = dom.charat（0）; switch（str）{case '。' ：this.ele = document.getElementsByClassName（dom.Substring（1））|| null;壊す; case '＃'：this.ele = document.getElementById（dom.substring（1））||ヌル;壊す;デフォルト：if（document.getElementsByTagname（dom）.length）{this.ele = document.getElementsByTagname（dom）; } else if（document.getElementsbyname（dom）.length）{this.ele = document.getElementsByname（dom）; } else {this.ele = null; }}これを返します。 }; getDom.prototype.get = function（num）{return this.ele [num] || this.ele; } getdom.prototype.insert = function（value、num）{this.ele [num] .innerhtml = value; } return new getdom（dom）;}CSS属性の取得関数
CSS属性の取得は2つのタイプに分割されます。 1つは、 currentStyleを使用しています。もう1つは、 getComputedStyleを使用した他の主流のブラウザであり、以下は互換性のあるバージョンです。
/* css get*/function getcss（o、key）{return o.currentstyle？ o.currentStyle [key]：document.defaultview.getComputedStyle（o、false）[key]; };割り当て関数
書くとき、私はしばしばDOMスタイルの割り当てに遭遇します。便利なため、私は特別に割り当てのための関数を書きました：
/** - function- @param：obj割り当てオブジェクト - @param：option -@parma： @parma：value assign content*/function setAssign（obj、option、value）{switch（option）{case 'width'：obj.style.width = value;壊す;ケース「高さ」：obj.style.height = value;壊す;ケース「トップ」：obj.style.top = value;壊す;ケース「左」：obj.style.left = value;壊す;ケース「位置」：obj.style.position = value;壊す;ケース「カーソル」：obj.style.cursor = value; }}準備は基本的に完了しており、今では執筆が正式に開始されました。
イベントをクリックして移動することにより、作物領域の描画を完了します
次のように、画像のmousedownとmousemoveイベントの監視をセットします。
//画像をクリックしてOpicture.Onmousedown = function（ev）{//イベントオブジェクトvar oevent = ev || window.event; //初期マウス位置var tempx = oevent.clientx; var tempy = oevent.clienty; //作物の位置を調整しますotailor.style.left = oevent.clientx + 'px'; otailor.style.top = oevent.clienty + 'px'; //マウスはクリッピング領域を移動して作物領域を描画しますシャドウ領域ドキュメント。OnmouseMove= function（ev）{//マウスはイベントオブジェクトvar oevent = ev ||を移動しますwindow.event; //マウスの前のマウスの位置を引いた現在のマウスの位置は、マウスの動きの距離に等しいvar sleft = oevent.clientx -tempx; var stop = oevent.clienty -tempy; //バウンド外の制限のトリミングでは、（otailor.offsetleft+otailor.offsetwidth）> =（opicture.offsetleft+opicture.offsetwidth）{selft = Opicture.OffsetLeft+Opecture.OffsetLeft-OffsetLeft; OffsetLeft; } if（（otailor.offsettop+otailor.offsetheight）> =（opicture.offsettop+opicture.offsetheight））{stop = opicture.offsettop+opicture.offseetheight -otailor.offsettop; } //作物領域描画otailor.style.width = sleft + 'px'; otailor.style.height = stop + 'px'; //クロップ面積ディスプレイotailor.style.display = 'block'; //（var i = 0; i <oshadow.length; i ++）{oshadow [i] .style.display = 'block'; } //シャドウ描画シャドウ（Opicture、Otailor、Oshadow）; //作物のボーダーテーラーボーダー（ODIV、OHANDLE、OTAILOR）を追加します。 //デフォルトのイベントをブロックしますoevent.preventdefault（）; }; //マウスをリリースして、ムーブメントイベントドキュメントをキャンセルします。 window.event; //イベントの移動document.onmousemove = null; //デフォルトのイベントをブロックしますoevent.preventdefault（）; }; //デフォルトのイベントをブロックoevent.preventdefault（）;}シャドウエリア図面
/ *** @param：Opicture Picture dom object* @param：otailor Crop Area dom Object* @param：Oshadow Shadow dom Object*/ function Shadow（Opicture、Otailor、Oshadow）{//左のシャドウエリアSetSign（Oshadow [0]、 'width'、 'left'）））） + 'px'）; SetAssign（Oshadow [0]、 'height'、parseint（getCSS（opicture、 'left'）） + 'px'）; SetAssign（Oshadow [0]、 'height'、parseint（getCSS（opicture、 'height'）） + 'px'）; SetAssign（Oshadow [0]、 'left'、parseint（getCSS（Opicture、 'left'）） + 'px'） （parseint（getCSS（opicture、 'width'）） - parseint（getCSS、 'width'）） - parseint（getCSS（oshadow [0]、 'width'） + 'px'）（oshadow [2]、 'height'）; setAssign（Oshadow [2]、 'left'、（parseint（getCSS、 'left'））） + parseint（getCSS（otailor、 'width'））） + 'px'）; SetAssign（Oshadow [2]、 'top'、parseint（getcss（opicture、 'top'）） + 'px'）; //上部影領域SetAssign（Oshadow [1]、 'width'、parseint（getCSS（otailor、 'width'）） + 'px'）; setAssign（Oshadow [1]、 'height'、（parseint（getCSS、 'top'）） - parseint（getCSS（Opicture、 'top'））） + 'px'）; SetAssign（Oshadow [1]、 'left'、（parseint（getCSS、 'left'））） + parseint（getCSS（oshadow [0]、 'width'）） + 'px'）; SetAssign（Oshadow [1]、 'top'、parseint（getcss（opicture、 'top'）） + 'px'）; //下部シャドウエリアSetAssign（Oshadow [3]、 'width'、parseint（getCSS（otailor、 'width'）） + 'px'）; setAssign（Oshadow [3]、 'height'、（parseint（getCSS、 'height'）） - parseint（getcss（otailor、 'height'）） - parseint（getCSS（oshadow [1]、 'height'）） + 'px'）; SetAssign（Oshadow [3]、 'left'、（parseint（getCSS、 'left'）） + parseint（getCSS（oshadow [0]、 'width'）） + 'px'）; SetAssign（Oshadow [3]、 'top'、（parseint（getCSS、 'tot'）） + parseint（getCSS（otailor、 'height'）） + 'px'）;}実際のWebページの使用では、レイアウト内の画像CSSに残りまたは上位属性がない場合、上記のコードがエラーを生成することに注意してください。代わりにオフセットレフトとオフセットを使用する必要があります。
作物の境界線を追加します
リリースされたレイアウト図では、作物の端を見ることができ、4つの角と4つの側面のそれぞれは小さな正方形の形をしています。追加は、切断エリアと非カットエリアを区別するだけでなく、伸びた切断領域を追加する次のステップに便利さを提供することです。コードの書き始めましょう：
/*** border描画* @param：odivすべての境界オブジェクト* @param：ohandleドットエッジ* @param：otailor作物オブジェクト*/function tailorborder（odiv、ohandle、otailor）{//ボーダーの初期化（var i = 0; i <odiv.length; i+ setAssign（odiv [i]、 'top'、 '0px'）; setAssign（odiv [i]、 'left'、 '0px'）; setAssign（odiv [i]、 'left'、 '0px'）; setAssign（odiv [i]、 'width'、parseint（getcss（otailor、 'width'）） + 'px'）; setAssign（odiv [i]、 'height'、parseint（getCSS（otailor、 'height'）） + 'px'）; } /*ドットのようなエッジ図面* / //（var i = 0; i <4; i ++）{// dotのような描画setassign（ohandle [i]、 'position'、 'absolute'）の4コーナードットのようなエッジ図面。 setAssign（ohandle [i]、 'width'、 '5px'）; setAssign（ohandle [i]、 'height'、 '5px'）; // 0 2は、左ドットのようなif（i％2 == 0）{setAssign（ohandle [i]、 'left'、 '0px'）; setAssign（ohandle [i]、 'top'、（i == 0？ '0px' ：（ parseint（getCSS）） - 8） + 'px'））; } else {//右dot -like setAssign（ohandle [i]、 'left'、（parseint（getCSS（otailor、 'width'））-6） + 'px'）; setAssign（ohandle [i]、 'top'、（i == 1？ '0px'：parseint（getCSS（otailor、 'height'））-8） + 'px'）; }} //（var i = 4; i <ohandle.length; i ++）{setAssign（ohandle [i]、 'position'、 'absolute'）; setAssign（ohandle [i]、 'width'、 '5px'）; setAssign（ohandle [i]、 'height'、 '5px'）; // 4 6は、（i％2 == 0）{setAssign（ohandle [i]、 'left'、parseint（getcss（otailor、 'width'）） / 2 + 'px'）; setAssign（ohandle [i]、 'top'、（i == 4？ '0px' ：（ parseint（getCSS）） - 8） + 'px'））; } else {//左および右のドットsetAssign（ohandle [i]、 'top'、parseint（getCSS（otailor、 'height'）） / 2 + 'px'）; setAssign（ohandle [i]、 'top'、parseint（getCSS（otailor、 'height'）） / 2 + 'px'）; setAssign（ohandle [i]、 'left'、（i == 5？ '0px'：parseint（getCSS（otailor、 'width'））-8） + 'px'）; }}}レイアウトでは、クリッピングエリアクラス名box_handleを備えた最初の4つのDivは、4つのコーナーのドットを表し、最後の4つはエッジの中央にあるドットを表し、すべてが時計回りに分布しています。完了後、効果は次のとおりです。
影のある領域を監視します
作物面積と影の面積が描かれています。ここで、マウスが非粉砕領域（つまり、影の領域）をクリックすると、作物領域をキャンセルするための小さな機能を追加します。
//シャドウエリアの設定の時間を設定します。作物領域が消えた場合、シャドウエリアが消えます（var i = 0; i <oshadow.length; i ++）{oshadow [i] .index = i; oshadow [i] .onmousedown = function（）{otailor.style.display = 'none'; otailor.style.width = '0px'; otailor.style.hegiht = '0px'; for（var i = 0; i <oshadow.length; i ++）{oshadow [i] .style.display = 'none'; oshadow [i] .style.left = '0px'; oshadow [i] .style.top = '0px'; }}}マウスの動きの位置を監視します
次に、マウスが端のドット型の境界に移動すると、クロッピングエリアストレッチの機能を追加します。
マウスディスプレイ効果を追加します
//尖ったボーダー監視設定対応する操作OTAILOR.ONMOUSEMOVE = function（ev）{var otarget = oevent.target; switch（otarget.id）{case 'box_1'：//左上左setassign（otailor、 'cursor'、 'nw-resize'）;壊す; case 'box_2'：//右上setAssign（otailor、 'cursor'、 'ne-resize'）;壊す;ケース 'box_3'：//左下のsetAssign（otailor、 'cursor'、 'sw-resize'）;壊す; case 'box_4'：//右下setAssign（otailor、 'cursor'、 'se-resize'）;壊す; case 'box_5'：//上部SetAssign（otailor、 'cursor'、 'n-resize'）;壊す; case 'box_6'：//左setAssign（otailor、 'cursor'、 'w-resize'）;壊す; case 'box_7'：//左下のsetAssign（otailor、 'cursor'、 's-resize'）;壊す; case 'box_8'：//右setAssign（otailor、 'cursor'、 's-resize'）;壊す; case 'box_8'：//右setAssign（otailor、 'cursor'、 'e-resize'）;壊す;デフォルト：//作物領域には、可動プロンプトのsetAssign（otailor、 'cursor'、 'move'）が表示されます。壊す; }}監視するDIVがたくさんあるため、イベント委任によって追加されます。これはデモに不便です。興味のある学生はそれを自分でテストすることができます。
ストレッチ効果を追加します
コード
//作物でイベントを移動するotailor.onmousedown = function（ev）{//イベントオブジェクトvar oevent = ev || window.event; //カーソルステータスvar ocur = getCss（otailor、 'cursor'）を取得します。 //初期マウス位置var stmpx = oevent.clientx; var stmpy = oevent.clienty; //作物領域の属性を取得して、オブジェクトでそれらを保存して、oattrs.left = getCSS（otailor、 'left'）; oattrs.top = getCss（otailor、 'top'）; oattrs.width = getcss（otailor、 'width'）; oattrs.height = getCss（otailor、 'height'）; document.onmousemove = function（ev）{//イベントオブジェクトvar oevent = ev ||を移動するwindow.event; //現在のマウスの位置を引いた最初のマウスの位置は、マウスの動きの距離に等しいvar sleft = oevent.clientx -stmpx; var stopt = oevent.clienty -stmpy; //マウスの動きの距離を示しますvar otmpheight = ''; var otmptop = ''; var otmpwidth = ''; var otmpleft = ''; switch（ocur）{case 'nw -resize'：//左上左otmpwidth = parseint（oattrs.width） - sleftt; otmpheight = parseint（oattrs.height） - 停止; otmpleft = parseint（oattrs.left） + sleftt; otmptop = parseint（oattrs.top） + stopt;壊す;ケース「ne-resize '：//右上//この時点で、この時点での移動距離が正の値であるため、幅はマウスの動き距離を差し引くことができません。 otmpheight = parseint（oattrs.height） - 停止; //デフォルトのサウンドが右に移動されるため、右上隅を移動するために左値は必要ありませんotmptop = parseint（oattrs.top） + stopt;壊す;ケース 'SW -Resize'：//左下//右上の高さと同じマウスの動き距離に追加する必要がありますotmpwidth = parseint（oattrs.width） - sleftt; otmpheight = parseint（oattrs.height） + stopt; otmpleft = parseint（oattrs.left） + sleftt;壊す;ケース「SE-resize '：//右下//左下の組み合わせが同時に左下の組み合わせ左と上部otmpwidth = parseint（oattrs.width） + slefttを削除します。 otmpheight = parseint（oattrs.height） + stopt;壊す; case 'n -resize'：// top otmpheight = parseint（oattrs.height） - 停止; otmptop = parseint（oattrs.top） + stopt;壊す; case 'w -resize'：//左otmpwidth = parseint（oattrs.width） - sleftt; otmpleft = parseint（oattrs.left） + sleftt;壊す;ケース 's-resize'：// otmpheight = parseint（oattrs.height） + stopt;壊す;ケース 'e-resize'：//右var otmpwidth = parseint（oattrs.width） + sleftt;壊す;デフォルト：//それ以外の場合、それは移動する作物領域のテーラフォーブ（oevent、otailor、opicture、oshadow）です。壊す; } //境界に引っ張るif（parseint（getCSS（otailor、 'top'））<= opicture.offsettop）{otmpheight = parseint（getCSS（opicture、 'height'）） - （Opicture.Offsettop+parseint（getCSS（opicture、 'height'））） - parseint（getCSS（otailor、 'top'））））; otmptop = opicture.offsettop; } else if（opicture.offsettop+parseint（getcss（opicture、 'height'）））<=（parseint（getCSS（otailor、 'top'）））+parseint（getCSS（otailor、 'height'）））））））{// opicture.offsettop+parseint（getcss（opicture、 'height'））） - parseint（getCSS（otailor、 'top'）））; } //境界に左に引っ張るif（（parseint（getcss（otailor、 'left'））））<= opicture.offsetleft）{otmpwidth = parseint（getCSS（opicture、 'width'）） - （Opicture.OffsetLeft+ParseInt（getCSS（Opicture）、 'width'） - parseint（getCSS（otailor、 'left'）））otmpleft = opicture.offsetLeft; } else if（parseint（getcss（otailor、 'left'））+parseint（getCSS（otailor、 'left'））> =（opicture.offsetleft+opicture.offsetwidth）{// parseint（getcss（otailor、 'left'））; } // if（otmpwidth）{setAssign（otailor、 'width'、otmpwidth + 'px'）; } if（otmpheight）{setAssign（otailor、 'height'、otmpheight + 'px'）; } if（otmpleft）{setAssign（otailor、 'left'、otmpleft + 'px'）; } if（otmptop）{setAssign（otailor、 'top'、otmptop + 'px'）; } //シャドウ描画シャドウ（Opicture、Otailor、Oshadow）; //作物のボーダーテーラーボーダー（ODIV、OHANDLE、OTAILOR）を追加します。 }; //マウスをリリースするときは、ムーブメントイベントdocument.onmouseup = function（ev）をキャンセルすることに注意してください。 window.event; document.onmousemove = null; oevent.preventdefault（）; } oevent.preventdefault（）; };特に上向きと左に移動するとき、ストレッチするときに移動距離の計算に注意してください。クロップドエリアの左と最上位の値を同時に変更することに注意してください。そうしないと、下向きと右方向にのみ増加します。詳細に計算する方法について話しましょう。
原理
マウスを左上隅に伸ばす例として、マウスの移動距離は上記のものと一致していますが、現時点では、計算値は負の数であることに注意してください。したがって、作物領域の付加値を計算する場合、元の作物領域の幅または高さによって値を差し引く必要があります。同時に、幅が増加するのと同じくらい、作物領域の左のオフセット値を差し引く必要があります。それ以外の場合、表示された効果は、下の図に示すように、作物領域が右に増加することです。
上記の図では、緑の領域は、伸びると幅と高さが追加された後の作物エリアです。オフセット調整が実行されない場合、黄色の領域はオフセットジャンプ後の作物エリアであり、2つの重ねられた領域は元の作物エリアです。
これは左上隅に伸びており、左下隅のストレッチは他のものに似ています。上方向に応じて上方向に置くことができます。
そして、もう1つの重要なのは、境界を伸ばして境界を越えて上記で言及されていることです。そのため、もう説明しません。
クロップドエリアの移動
それでは、最後の機能、作物領域の動きについて話しましょう。マウスが作物領域内を移動すると、動きイベントがトリガーされます。現時点では、作物領域を移動できます。コードは次のとおりです。
/*作物領域の動き*/function tailormove（ev、otailor、opicture、oshadow）{var oevent = ev || window.event; var otmpx = oevent.clientx -otailor.offsetLeft; var otmpy = oevent.clienty -otailor.offsettop; document.onmousemove = function（ev）{var oevent = ev || window.event; oleft = oevent.clientx -otmpx; otop = oevent.clienty -otmpy; if（oleft <opicture.offsetLeft）{oleft = opicture.offsetLeft; } else if（oleft>（opicture.offsetLeft + opicture.offsetWidth -otailor.offsetWidth））{oleft = Opicture.OffsetLeft + Opicture.OffsetWidth -OTAILOR.OFFSETWIDTH; } if（otop <opicture.offsettop）{otop = opicture.offsettop; } else if（otop>（opicture.offsettop + opicture.offsetheight -otailor.offsetheight））{otop = otop = opicture.offsettop + opicture.offseetheight -otailor.offseetheight; } otailor.style.left =（oleft）+ 'px'; otailor.style.top =（otop） + 'px';影（Opicture、Otailor、Oshadow）; }}作物の位置を取得します
作物効果の機能は基本的に完了するため、作物の位置を取得する必要があります。まず、どのプロパティを取得する必要があるかを知る必要があります。 PHPのGDライブラリ操作によると、作物の出発点座標と作物の幅と高さを知る必要があります。関数を使用してこのデータを取得してカプセル化して返します。
関数getele（）{var opicture = $（ 'img'）。get（0）; var otailor = $（'。IMG_BOX '）。get（0）; oattrs.leftx =（parseint（getcss（otailor、 'left'））） - opicture.offsetLeft）; oattrs.lefty =（parseint（getCss（otailor、 'top'））） - opicture.offsettop）; oattrs.twidth =（parseint（getcss（otailor、 'width'）））; oattrs.theight =（parseint（getcss（otailor、 'height'）））; oattrsを返します;}別の問題があります。 Webページの写真がCSSを使用して圧縮されている場合、ここで得られる位置は、想像していたものとは異なる作物のサイズとは異なります。トリミングされた画像の範囲は大きくなる可能性があり（元の画像が大きくなる）、または小さくなる可能性があります（元の画像は小さくなります）。
元の画像のサイズを取得できる場合は、正しいトリミング画像を取得できるように、圧縮画像と元の画像の比率に応じてトリミングできます。
わかりました、単純な画像のトリミング機能が完了し、Ajaxを使用して処理のために背景に渡すことができます。
この記事の内容はここで終わります。ご質問がある場合は、メッセージを残して話し合ってください。この記事がJavaScriptを学習するすべての人に役立つことを願っています。