jQueryの画像を切り抜くためのツールを作成しようとしています。私は既にすでに負荷があることを知っています。私が作ろうとしているものとの違いは、iChatやAdiumのような多くのMacアプリケーションで見つかったPicture Takerインターフェイスのように動作させたいということです。私はそれを行う方法について完全に立ち往生しています。誰も私に任意のアイデアを与えることはできますかImageKit Picture Takerを再作成するにはどうすればよいですか？
私はJcrop pluginはあなたを助けるかもしれないと思います！
ImageKitのどの機能は、エミュレーションを心配していますか？ Jcropプラグインはかなりスリックです。メニューシステムや他のuiビットは、他のJqueryプラグインでも簡単に実現できます。他に何を考えていますか？
jqueryui dialogのウィンドウを使い始めることができます。 – jimyshock
Adium/iChatでアバターを選択するときと同じように、ページ上のように写真を切り抜けることができます スライダーとクロッパーをリンクするには手がかりがありません – kennyisaheadbanger
jCropプラグインがほとんどの作業を行います。スライダーウィジェット（jqueryuiスライダーのような）と一緒にステッチするだけの少しのロジックが必要です。
ここはすばやく汚れた例です。あなたは確かに自分のサーバー上でファイルをホストしたいと思うでしょうが、私は何かを一緒に投げたいと思っています。
重要な違いの1つは、このコードは選択範囲をドラッグした場所を忘れて、現在の中間点の周りでサイズを変更するだけです。それがあなたにとって重要なのであれば、おそらくその機能をかなり簡単に追加することができます。
<html>
<head>
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.slider.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.slider.js"></script>
<script type="text/javascript" src="http://deepliquid.com/projects/Jcrop/js/jquery.Jcrop.js"></script>
<link rel="stylesheet" href="http://deepliquid.com/projects/Jcrop/css/jquery.Jcrop.css" type="text/css" />
<style type="text/css">
#slider { margin: 10px; }
</style>
<script type="text/javascript">
var jcrop_api;
$(document).ready(function(){
imgwidth = $("#cropbox").width();
imgheight = $("#cropbox").height();
aspectRatio=(imgheight > 0)?imgwidth/imgheight:1;
jcrop_api = $.Jcrop('#cropbox',{
setSelect: [ 0, 0, imgwidth, imgheight ],
aspectRatio: aspectRatio
});
$("#slider").slider({
min: 0,
max: 100,
value: 100,
slide: function(e,ui){
updateCrop(ui.value);
}
});
function updateCrop(size){
size = size/100;
maxX = $("#cropbox").width();
maxY = $("#cropbox").height();
midX = ((jcrop_api.tellSelect().x2 - jcrop_api.tellSelect().x)/2) + jcrop_api.tellSelect().x;
midY = ((jcrop_api.tellSelect().y2 - jcrop_api.tellSelect().y)/2) + jcrop_api.tellSelect().y;
midX = (midX < 0) ? midX * -1 : midX;
midY = (midY < 0) ? midY * -1 : midY;
sizeX = $("#cropbox").width() * size;
sizeY = $("#cropbox").height() * size;
x = midX - (sizeX/2);
y = midY - (sizeY/2);
x2 = midX + (sizeX/2);
y2 = midY + (sizeY/2);
// edge conditions
if (x < 0){
x2 -= x2 - x;
x = 0;
if (x2 > maxX) x2 = maxX;
}
if (x2 > maxX){
x -= (x2 - maxX);
x2 = maxX;
if (x < 0) x = 0;
}
if (y < 0){
y2 -= y;
y = 0;
if (y2 > maxY) y2 = maxY;
}
if (y2 > maxY){
y -= (y2 - maxY);
y2 = maxY;
if (y < 0) y = 0;
}
jcrop_api.setSelect([ x,y,x2,y2 ]);
}
});
</script>
</head>
<body>
<img src="http://deepliquid.com/projects/Jcrop/demos/demo_files/sago.jpg" id="cropbox" />
<div id="slider"></div>
</body>
</html>
Thnx、申し訳ありませんそれは私がオンラインになる前に自動承認...本当に申し訳ありません – kennyisaheadbanger
私はそれが助けて欲しいです。それをまとめるのは楽しいことでした。 –
ImageKit Picture takerのように動作させる方法を知っていますか？ – kennyisaheadbanger