Jquery Cropping image
Question
我正在尝试使用此http://odyniec.net/projects/imgareaselect/examples.html jQuery裁剪示例从jquery获取尺寸并将其发送到我的java，所以java文件会为我裁剪或我只是这样做它在客户端，但这对我不起作用这是我写的代码http://jsfiddle.net/UydpR/老实说，我不知道我在做什么或我应该怎么写，我想如果我只是说它会给我其余的选择...任何帮助或代码示例都将适用...我确实遵循了他们的文档，但是我对此很陌生
3 answers
solution1
1 2012-07-21 09:09:15
Remove the below line from script :
onSelectEnd: someFunction
Sample working code for you :
<!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>
solution2
0 2012-07-21 08:43:08
I'm not sure I fully understand your question. Do you want the width in pixels?
In that case, it is VERY easy: var w = $('tag').width(); var h = $('tag').height();
Now you can get clever with how you define these, say....
var w = $('tag').width() / $(window).width(); //is the percentage of the width of the browser that the picture has.
Then it is fairly straight forward to w*.5, will reduce by 2 the width of the browser, etc.
Please elaborate if you need more.
solution3
0 ACCPTED 2012-07-21 09:37:14
Your fiddle setup isn't correct. you use mootools instead of jQuery. First of all you have to change this. Also you code had a lot of problems, so you have to change it.
You can check out a Version with cropping an Image in this Fiddle:
If you add a Form with hidden fields and a php file like this code below you can submit the selection coordinates. I havent tried this yet but the developer of the script makes this example.
Add a form with hidden fields (with the names listed below) to your HTML Code.
Add this to the javascript code:
$(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);
}
});
});
Be sure that you have make a php file and. Submit the form data to your PHP file and do what you like with it.
Here you can find the tutorial: http://odyniec.net/projects/imgareaselect/examples-callback.html#submitting-selection-coordinates-demo
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.