我正在尝试将图像上传到临时文件夹以进行编辑(裁剪) 图像并使用所选的创建头像，但不起作用。
按钮加载应该对图像进行充电，加载后应该显示在: 但事实并非如此。我做错了。
注意:如果图像是静态的，则它是否有效。但我需要使用按钮上传才能使动态。
从那里，我打算使用裁剪器生成图像选择的预览。 查看所选结果结束
在获得裁剪器意图的值后，创建一个新的 json 格式，以将数据发送并保存在数据库中。
但我不明白!有人可以指导我!
我没有使用过这些技术， 原来如此，不明白怎么上传。并将路径和图像裁剪保存在数据库中!
注意:图片裁剪后，会保存在一个文件夹中，原来的不保存，只需要裁剪即可!
感谢您的建议!
这是插件:https://github.com/fengyuanchen/cropper
比 pediar 更好地帮助具有这些技术经验的人， 谢谢您的帮助!.
这是我的代码! ------ 也许我的代码很糟糕，所以我需要指导我，或者告诉我，如何做或应该做什么。谢谢----------
<小时/>启动代码!
<!DOCTYPE html>
<html>
<head>
<title>TEST DEMO UPLOAD</title>
<script src="jquery/jquery-2.1.4.min.js"></script><!-- jQuery is required -->
<link href="css/cropper.min.css" rel="stylesheet">
<link href="css/cropper.css" rel="stylesheet">
<link href="css/cropper.css" rel="stylesheet">
<script src="javascript/cropper.min.js"></script>
<style>
.img-container img {
width: 400px;
height: 500px;
}
</style>
</head>
<body>
<div class="columns">
<div class="img-container">
<img id="My_Image" alt="Picture Uploaded, To Crop" class="cropper" src="#">
</div>
<div class="columns">
<div class="previews ">
<div class="img-preview preview-lg">
</div>
</div>
</div>
the cropper JQuery info: https://github.com/fengyuanchen/cropper
<p>Example Upload and Crop with Cropper JQuery Plugins And Previews </p>
<form id="form" action="Demomode.php" method="post" enctype="multipart/form-data">
<lobel>Select image a Upload:</lobel>
<input type="file" id="Upload" name="Up" >
<input type="submit" value="Upload Image" name="submit">
</form>
<div>
<label id="image-data"></label>
</div>
<body>
</html>
<script>
// make references to file to charge in temp folder for edit with cropper
$('#Upload').click(function (){
var cp = $('#My_Image > img').cropper({
preview: ".img-preview", // A jQuery selector string, add extra elements to show preview.
aspectRatio:4/4,
strict:true,
background:false,
guides:false,
autoCropArea:0.6,
rotatable:false,
crop: function(data){
//create the preview of image original
$('.img-preview').cropper({
preview: ".img-preview",
aspectRatio:1/1,
strict:true,
});
//get data of part crop and send in format json for send to database
if(data.height < 100 || data.width < 100){
}else{
var json = [
'{"x":' + data.x,
'"y":' + data.y,
'"height":' + data.height,
'"width":' + data.width + '}'
].join();
$().val(json);
}
// Send data of the image crop for save in database
$.ajax({
type:'POST',
url: $(this).attr('action'),
data:json,
cache:false,
contentType: false,
processData: false,
success:function(data){
console.log("success");
console.log(data);
},
error: function(data){
console.log("error");
console.log(data);
}
});
}
});
</script>
最佳答案
上面将 JSON 对象发送到数据库的代码仅发送裁剪器组件的坐标，以便服务器端的 PHP 实际裁剪图像。这就是整个事情的运作方式。
所以，如果我是你，我会看一下
他们的插件要容易得多。初始化。将 Base64 发送到服务器。在服务器端转换。中提琴!
关于javascript - 如何使用fengyuanchen/cropper裁剪图像并将图像裁剪的路径保存在数据库中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31753871/