HTML5キャンバス - 画像のプレビューと大きさが異なるスケーラブルなセクション

Question

私はいくつかの複雑な問題を解決する必要があります。今は、html5にオブジェクトキャンバスをサポートするjavascriptにこのような関数を書く必要があります。この関数は画像の一部を切り抜いてプレビューに表示します。私は、イメージの異なる解像度よりも行う必要があります。私はこれにjQueryライブラリ、特にjquery.Jcrop.jsを使用しています。プレビューの画像の可視部分は、あとの目的のために後で使用します。ファイルに切り捨てられた形で書き込み可能でなければなりません。キャンバスの機会。このスクリプトはうまくいきましたが、問題は大きい写真から小さい写真に拡大縮小しようとするときです（それぞれの画像がブラウザウィンドウ内で高さ500ピクセルに固定されるようにしたい）。私は、スクリプトの現在の図の下に提示：

function updatePreview(c) 
{ 
if (parseInt(c.w) > 0) 
{ 
var rx = 200/c.w; 
var ry = 300/c.h; 

// Show canvas image preview2 
var imageObj = $("#target")[0]; 
var canvas = $("#preview2")[0]; 
var context = canvas.getContext("2d"); 
canvas.setAttribute('width', '200'); 
canvas.setAttribute('height', '300'); 
//context.scale(2, 2); 
context.drawImage(imageObj, c.x, c.y, c.w, c.h, 0, 0, 
canvas.width, canvas.height); 

$('#preview').css({ 
width: Math.round(rx * boundx) + 'px', 
height: Math.round(ry * boundy) + 'px', 
marginLeft: '-' + Math.round(rx * c.x) + 'px', 
marginTop: '-' + Math.round(ry * c.y) + 'px' 
}); 
} 
}; 

そして、ここで最初のプレビューは、CSSに基づいて、それが正しく動作している

<table> 
<tr> 
<td> 
<img src="http://imgon.net/di-M7Z9.jpg" id="target" 
alt="obrazek" height="450"/> 
</td> 
<td> 
<div style="width:200px;height:300px;overflow:hidden;"> 
<img src="http://imgon.net/di-M7Z9.jpg" id="preview" alt="Preview" /> 
</div> 
<br /> 
<div> 
<canvas id="preview2" style="width:200px;height:300px;"></canvas> 
</div> 
</td> 
</tr> 
</table> 

を処理するスクリプトのために簡略化されたhtmlコードですが、 CSSは画像の一部のみをカバーし、実際にはカットしません。コントラスト、キャンバスは高解像度の画像を表示し、プレビューはスケーリングされた画像のセグメントを反映しません（私はセクションのみを拡大しました）。これはFirefoxで発生します。 Internet Explorerは特別なライブラリで、キャンバスの結果はCSSと同じです。私の最後の質問はです。スケーリングされたイメージのプレビューを作成する機能で、元の解像度のプレビューを作成する機能はどう思いますか？私はMath.round（rx * boundx）やcx Math.round（ry * boundy）のような変数c.yの代わりに入れようとしましたが、正しくはありません。 私はここにライブを見ることができるページを提供します：agd-brita.pl/mobile2/tutorial.html 私はあなたに助けを求める。進歩をありがとう。

Answer 1

jCropがあなたに答えるためにどのように動作するのか少し分かりました。

私は私のソリューションがどのように動作するかを示すためにバイオリンを作った：http://jsfiddle.net/maitrekaio/Wre8w/
主なポイントは、CSSと協力し、キャンバスでの作業は本当に異なっていて、あなたが別の計算をしなければならないということです。
しかし、開始は同じです：画像要素がtargetであり、内部にクロップがあります。作物の詳細はjCropによって与えられ、画像要素の寸法は変数displayedImgに格納されます。

CSSプレビュー

preview-containerは、私たちが含まれている画像の一部を見てみましょう窓のようなものです。含まれている画像要素のサイズが変更されていないため、画像のサイズはrealImgです。作物のサイズを変更して移動するとき、ウィンドウが同じように感じる必要があります。実際には、サイズ変更され移動された画像が含まれています。それをどのように計算するのですか？
比率（crop/displayedImg）は比率（preview/realImg）と同じでなければなりません。 realImg =（displayedImg * preview）/ crop
これで、CSSプレビューに適用される幅、高さ、x（marginLeft）、y（marginTop）を簡単に計算できます。

キャンバスキャンバスプレビュー

は、我々はcontext.drawImage（）、私たちはトリミングやサイズを変更することができます1の最も複雑なバージョンを使用しますことを知っています。このメソッドの最初のパラメータはJS画像オブジェクトです。targetイメージを使用します。今回は、実際の画像で作物を計算し、表示された画像の作物を知りたいとします。（crop/displayedImg）は（realImgCrop/realImg）と等しくなければなりません。 realImgCrop =（作物* realImg）/ displayedImg
完了：それは私たちに式を与えます！