javascript - Jqueryクロッピング画像

Question

このhttp://odyniec.net/projects/imgareaselect/examples.html Jquery Cropping の例を使用して、jquery からディメンションを取得し、それを Java に送信しようとしています。そのため、Java ファイルがトリミングを行うか、単に行うだけです。クライアント側ではここにありますが、私にとってはうまくいきません。ここに私が書いたコードがありますhttp://jsfiddle.net/UydpR/残りのオプションが表示されると言うだけでよいと思いました...コードのヘルプや例を提供していただければ幸いです...私は彼らのドキュメントに従いましたが、これはかなり新しいものです

score 1 · Accepted Answer

script から以下の行を削除します。

onSelectEnd: someFunction

サンプル作業コード:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="css/imgareaselect-default.css"/>
<link rel="stylesheet" type="text/css" media="screen" href="css/imgareaselect-animated.css"/>
<link rel="stylesheet" type="text/css" media="screen" href="css/imgareaselect-deprecated.css"/>
<script type="text/javascript" src="scripts/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.imgareaselect.min.js"></script>


</head>
<body>
<div>

<img id="imgareaselect-selection" width="400" src="http://chrisharrison.net/projects/colorflower/Flower2medium.jpg" alt="My image" name="photo" />

</div>

<div style="position: absolute; overflow: hidden; z-index: 2; ">
<div style="position: absolute; font-size: 0px; " class="imgareaselect-selection"></div>
<div style="position: absolute; font-size: 0px; " class="imgareaselect-border1"></div>
<div style="position: absolute; font-size: 0px; " class="imgareaselect-border2"></div>
<div style="position: absolute; font-size: 0px; " class="imgareaselect-border3"></div>
<div style="position: absolute; font-size: 0px; " class="imgareaselect-border4"></div>
<div class="imgareaselect-handle" style="position: absolute; font-size: 0px; z-index: 1; width: 5px; height: 5px; "></div>
<div class="imgareaselect-handle" style="position: absolute; font-size: 0px; z-index: 1; width: 5px; height: 5px; "></div>
<div class="imgareaselect-handle" style="position: absolute; font-size: 0px; z-index: 1; width: 5px; height: 5px; "></div>
<div class="imgareaselect-handle" style="position: absolute; font-size: 0px; z-index: 1; width: 5px; height: 5px; "></div>
<div class="imgareaselect-handle" style="position: absolute; font-size: 0px; z-index: 1; width: 5px; height: 5px; "></div>
<div class="imgareaselect-handle" style="position: absolute; font-size: 0px; z-index: 1; width: 5px; height: 5px; "></div>
<div class="imgareaselect-handle" style="position: absolute; font-size: 0px; z-index: 1; width: 5px; height: 5px; "></div>
<div class="imgareaselect-handle" style="position: absolute; font-size: 0px; z-index: 1; width: 5px; height: 5px; "></div>
</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function () {
    $('img').imgAreaSelect({
        handles: true,

    });
    $('img').imgAreaSelect({
    onSelectEnd: function (img, selection) {
        alert('width: ' + selection.width + '; height: ' + selection.height);
    }
});
$('img').imgAreaSelect({
    keys: { arrows: 15, ctrl: 5, shift: 'resize' }
});
});
</script>
<script src="http://www.google-analytics.com/ga.js" type="text/javascript"></script>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>

<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-3683332-2");
pageTracker._initData();
pageTracker._trackPageview();
</script>

score 0 · Accepted Answer

あなたの質問を完全に理解しているかどうかわかりません。幅をピクセル単位で指定しますか?

その場合、とても簡単です: var w = $('tag').width(); var h = $('タグ').height();

これで、これらをどのように定義するかを賢くすることができます....

var w = $('tag').width() / $(window).width(); //is the percentage of the width of the browser that the picture has.

次に、w*.5 にかなり簡単に進み、ブラウザーの幅を 2 に減らします。

さらに必要な場合は詳しく説明してください。

score 0 · Accepted Answer

フィドルの設定が正しくありません。jQuery の代わりに mootools を使用します。まず、これを変更する必要があります。また、コードには多くの問題があったため、変更する必要があります。

このフィドルで画像をトリミングしてバージョンをチェックアウトできます。

http://jsfiddle.net/UydpR/2/

以下のコードのような非表示フィールドと php ファイルを含むフォームを追加すると、選択座標を送信できます。私はまだこれを試していませんが、スクリプトの開発者がこの例を作成しています。

隠しフィールド (以下にリストされている名前) を持つフォームを HTML コードに追加します。

これを JavaScript コードに追加します。

$(document).ready(function () {
$('#ladybug').imgAreaSelect({
    onSelectEnd: function (img, selection) {
        $('input[name="x1"]').val(selection.x1);
        $('input[name="y1"]').val(selection.y1);
        $('input[name="x2"]').val(selection.x2);
        $('input[name="y2"]').val(selection.y2);            
    }
});

});

phpファイルを作成していることを確認してください。フォームデータを PHP ファイルに送信し、好きなように処理します。

ここでチュートリアルを見つけることができます: http://odyniec.net/projects/imgareaselect/examples-callback.html#submitting-selection-coordinates-demo

javascript - Jqueryクロッピング画像

3 に答える 3

Related

Reference