我一直在使用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.将图片按钮发送到数据库。
答案 0 :(得分：1)
好吧，回答可能已经很晚了，但希望将来能帮助其他人提出同样的问题。因此，如果您想在JCropper中提供图像，那么您可以选择其中两个选项。
1）让用户选择一个图像并将其上传到服务器并获取路径并在此类提供JCrop目标作为源
$('#cropbox').attr('src','http://www.mysite.com/upload/abc.jpg');
$('#cropbox').Jcrop({
aspectRatio: 1, //To keep aspect ratio
boxWidth: 650, //To handle large images
boxHeight: 400, //To handle large images
onSelect: updateCoords
},function()
{
alert("Image has been added to JCrop.");
});
2）如果您希望用户选择图像然后裁剪然后上传，那么您可以使用此代码执行此操作但请记住此代码使用的 HTML5文件阅读器API 不完整所有浏览器都支持但是根据caniuse.com，87％的今天浏览器支持此功能，所以我建议使用这种方法。
<input type="file" id="uplPic" />
$(document).on('change', '#uplPic', function()
{
if(window.FileReader)
{
var reader = new FileReader();
reader.onload = function(e)
{
$('#cropbox').attr('src',reader.result);
$('#cropbox').Jcrop({
aspectRatio: 1,
boxWidth: 650,
boxHeight: 400,
onSelect: updateCoords
},function()
{
alert("Image has been added to JCrop.");
});
}
reader.readAsDataURL(this.files[0]);
}
});
我使用JQuery作为速记。现在，您可以获取维度并将图像上传到服务器并使用PHP或其他方式在那里裁剪。希望有所帮助。