我一直在使用来自http://deepliquid.com/projects/Jcrop/demos.php?demo=thumbnail的演示来创建裁剪器，但它没有向其上传图片的功能。有谁知道该怎么做？
<!DOCTYPE html>
<html lang="en">
<head>
<title>Upload Your Own Kiss</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<script src="../js/jquery.min.js"></script>
<script src="../js/jquery.Jcrop.js"></script>
<script type="text/javascript">
var previewW, previewH, previewL, previewT;
var imagefile;
jQuery(function(){
jGo(true);
});
function jGo(changing) {
setMainImage();
// Create variables (in this scope) to hold the API and image size
var jcrop_api,
boundx,
boundy,
// Grab some information about the preview pane
$preview = $('#preview-pane'),
$pcnt = $('#preview-pane .preview-container'),
$pimg = $('#preview-pane .preview-container img'),
xsize = $pcnt.width(),
ysize = $pcnt.height();
console.log('init',[xsize,ysize]);
if (changing) {
$('#target').Jcrop({
onChange: updatePreview,
onSelect: updatePreview,
aspectRatio: xsize / ysize
},function(){
// Use the API to get the real image size
//this.setImage(imagefile);
var bounds = this.getBounds();
console.log("Bounds",bounds);
boundx = bounds[0];
boundy = bounds[1];
//boundx = xsize;
//boundy = ysize;
// Store the API in the jcrop_api variable
jcrop_api = this;
// Move the preview into the jcrop container for css positioning
$preview.appendTo(jcrop_api.ui.holder);
});
}
else {
$pimg.css({
width: previewW + 'px',
height: previewH + 'px',
marginLeft: '-' + previewL + 'px',
marginTop: '-' + previewT + 'px',
});
}
function updatePreview(c)
{
if (parseInt(c.w) > 0)
{
var rx = xsize / c.w;
var ry = ysize / c.h;
previewW = Math.round(rx * boundx);
previewH = Math.round(ry * boundy);
previewL = Math.round(rx * c.x);
previewT = Math.round(ry * c.y);
$pimg.css({
width: previewW + 'px',
height: previewH + 'px',
marginLeft: '-' + previewL + 'px',
marginTop: '-' + previewT + 'px',
});
}
};
}
function showParams() {
alert ("Params are: " + ":" + previewW + ":" + previewH + ":" + previewL + ":" + previewT);
}
function sendParams() {
alert ("Params are: " + previewW + ":" + previewH + ":" + previewL + ":" + previewT);
var request = $.ajax({
type: 'POST',
url: "save.php",
success: function(response) {
console.log((response=="ok")?"stored ok":"store error!");
},
failure: function() {
console.log("ajax failure!");
},
data: "imgURL=" + escape(imagefile) + "&x=" + previewW + "&y=" + previewH + "&l=" + previewL + "&t=" + previewT
});
}
function setMainImage() {
var imgFolder = "demo_files/";
imagefile = imgFolder + parseQuery(querystring)["image"];
//$('#target-pane').innerHTML('<img src="'+imagefile+'" id="target" alt="[Jcrop Example]" />');
document.getElementById("target-pane").innerHTML='<img src="'+imagefile+'" id="target" alt="[Jcrop Example]" />';
document.getElementById("preview-pane").innerHTML='<div id="preview-div" class="preview-container"><img src="'+imagefile+'" class="jcrop-preview" alt="Preview" /></div>';
}
var querystring = window.location.search.substring(1); // looks strange, but it works
function parseQuery(str) { // from StackOverflow - parses query string
if(typeof str != "string" || str.length == 0) return {};
var s = str.split("&");
var s_length = s.length;
var bit, query = {}, first, second;
for(var i = 0; i < s_length; i++)
{
bit = s[i].split("=");
first = decodeURIComponent(bit[0]);
if(first.length == 0) continue;
second = decodeURIComponent(bit[1]);
if(typeof query[first] == "undefined") query[first] = second;
else if(query[first] instanceof Array) query[first].push(second);
else query[first] = [query[first], second];
}
console.log("parseQuery: query is ", query);
return query;
}
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="span12">
<div class="jc-demo-box">
<div class="page-header">
<h1 style=color: whitel>Upload your own kiss</h1>
</div>
<div id="target-pane">
MAIN IMAGE
</div>
<div id="preview-pane">
<div id="preview-div" class="preview-container">
Preview img goes here
</div>
</div>
<div>
<input type="button" value="Done!" onclick="sendParams();" />
</div>
<div>
<input type="text" id=paramsId />
<input type="button" value="GetParams" onclick="getParams(getElementById('paramsId').value);" />
</div>
<div class="description">
<p>
<ul style=color:white;><b>Instructions</b>
<li>Upload your image</li>
<li> Crop it as close to your lips as possible (watch out for your nose!) </li>
<li> Hit done when done!</li>
</ul>
</p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</body>
</html>
裁剪后，我希望将其发送到另一个函数，以便人们可以在图像保存到数据库之前翻转图像。
到目前为止，我有这个：
<body onLoad="setUp();">
<div id="imbox">
<div id="left"><img id="leftimg" src="" /></div>
<div id="right"><img id="rightimg" src="" /></div>
<div id="checks">
<span id=boxlspan><input type="checkbox" id="boxleft" onchange='flipIt("left")'> Flip?</span>
<span id=boxrspan>Flip? <input type="checkbox" id="boxright" onchange='flipIt("right")'></span>
</div>
</div>
</body>
回顾一下： 1. 上传到 Jcrop 的按钮。2.发送图片按钮翻转。3. 发送图片按钮到数据库。