我正在处理一个项目，该项目将上传的图像裁剪成圆形，然后将其保存以供预览。这也是用于下载裁切的保存图像的按钮。
这是我的主要php页面：
<html lang="en">
<head>
<title>PHP - jquery ajax crop image before upload using croppie plugins</title>
<script src="http://demo.itsolutionstuff.com/plugin/jquery.js"></script>
<script src="http://demo.itsolutionstuff.com/plugin/croppie.js"></script>
<link rel="stylesheet" href="http://demo.itsolutionstuff.com/plugin/bootstrap-3.min.css">
<link rel="stylesheet" href="http://demo.itsolutionstuff.com/plugin/croppie.css">
</head>
<body>
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">Image Cropping Area</div>
<div class="panel-body">
<div class="row">
<div class="col-md-4 text-center">
<div id="upload-demo" style="width:350px"></div>
</div>
<div class="col-md-4" style="padding-top:30px;">
<strong>Select Image:</strong>
<br/>
<input type="file" id="upload">
<br/>
<button class="btn btn-success upload-result">Upload Image</button>
</div>
<div class="col-md-4" style="">
<div id="upload-demo-i" style="background:#e1e1e1;width:300px;padding:30px;height:300px;margin-top:30px"></div>
</div>
<div>
<a name="Download Save Image" id="download" download>Download Save Image</a>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$uploadCrop = $('#upload-demo').croppie({
enableExif: true,
viewport: {
width: 200,
height: 200,
type: 'circle'
},
boundary: {
width: 300,
height: 300
}
});
$('#upload').on('change', function () {
var reader = new FileReader();
reader.onload = function (e) {
$uploadCrop.croppie('bind', {
url: e.target.result
}).then(function(){
console.log('jQuery bind complete');
});
}
reader.readAsDataURL(this.files[0]);
});
$('.upload-result').on('click', function (ev) {
$uploadCrop.croppie('result', {
type: 'canvas',
size: 'viewport'
}).then(function (resp) {
$.ajax({
url: "ajaxpro.php",
type: "POST",
data: {"image":resp},
success: function (data) {
console.log(data);
var response = JSON.parse(data);
if (response.image) {
html = '<img id="preview" src="' + response.image + '" />';
$("#upload-demo-i").html(html);
$('#download').attr({
target: '_blank',
href: response.image
})
}else {
alert('Failed to upload image');
}
}
});
});
});
</script>
</body>
</html>对于ajax，另一个是：
$data = $_POST['image'];
list($type, $data) = explode(';', $data);
list(, $data) = explode(',', $data);
$data = base64_decode($data);
$imageName = time().'.png';
if (file_put_contents('upload/' . $imageName, $data)) {
echo json_encode(['image' => 'upload/' . $imageName]); // upload is successful and we return image URL to Javascript
}else {
echo json_encode(['image' => false]); // if upload fails
}它的功能很简单并且运行良好。我试图制作一个简单的可下载按钮，但是没有找到合适的JQuery。现在，我正在为下载按钮寻找JQuery，以下载裁剪的图像。请指导我必须把代码的哪一部分放在哪里。
谢谢您的帮助。 🙂
参考方案
我将您的“下载图片”按钮更改为<a>，并为其指定了download的ID，并使用HTML5 download attribute来强制文件下载
<div>
<a name="Download Save Image" id="download" download>Download Save Image</a>
</div>
您的PHP
$data = $_POST['image'];
list($type, $data) = explode(';', $data);
list(, $data) = explode(',', $data);
$data = base64_decode($data);
$imageName = time().'.png';
if (file_put_contents('upload/' . $imageName, $data)) {
echo json_encode(['image' => 'upload/' . $imageName]); // upload is successful and we return image URL to Javascript
}else {
echo json_encode(['image' => false]); // if upload fails
}
然后在AJAX中获取图像URL，并通过添加href和target属性将其设置为下载锚标记。
$('.upload-result').on('click', function (ev) {
$uploadCrop.croppie('result', {
type: 'canvas',
size: 'viewport'
}).then(function (resp) {
$.ajax({
url: "ajaxpro.php",
type: "POST",
data: {"image": resp},
success: function (data) {
console.log(data);
var response = JSON.parse(data);
if (response.image) {
html = '<img id="preview" src="' + response.image + '" />';
$("#upload-demo-i").html(html);
$('#download').attr({
target: '_blank',
href: response.image
})
}else {
alert('Failed to upload image');
}
}
});
});
});
我收到警告：session_start（）[function.session-start]：无法发送会话缓存限制器-标头已发送（错误输出开始如果我将表单数据提交到其他文件进行处理，则可以正常工作。但是，如果我将表单数据提交到同一页面，则会出现此错误。请建议<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0…
使用PHP包含时的淡入淡出过渡 - php我正在尝试使用jQuery或CSS（或其他方式！）在DIV中包含的php页面上创建淡入淡出或滑动过渡。我四处搜寻，发现了很多淡入淡出过渡的示例，这些实例彼此淡入淡出div或隐藏内容淡入淡出，但是这种情况略有不同。我有一个DIV，其内容由导航栏控制。选中后，每个页面都可以使用PHP成功地包含在div中，但我想使内容淡入和淡出。关于如何在页面更改之间进行漂亮过渡…
AJAX调用只能与$(document).on('click')一起使用 - php我有一个显示数据库条目的表。用户能够为每一行打开一个弹出菜单。选项之一是删除数据库条目，并且该表应通过AJAX调用相应地刷新。只要有人单击#delete-toggle中的table-popup，我就会在HTML页面上进行AJAX调用（table-popup是div，当有人单击每行中存在的表中的table-edit-button时出现的表）： <div …
将输入类型复选框关联到输入类型文本 - php我有一个问题，我需要将输入类型复选框与输入类型文本关联。情况如下：从数据库中提取数据。 PK数据是复选框的值。当复选框选择输入类型的文本时，您可以在其中输入特定数字。现在的问题是，选中所有类型的复选框输入文本都会被激活。我希望通过选择复选框输入，仅启用与复选框相关联的输入。我的HTML代码（此代码创建一个输入复选框，并为数据库中的每个记录输入文本，而我要激活…
jQuery显示基于序列化哈希的隐藏选择菜单 - php我试图通过使用Ajax和序列化的哈希值来使选择菜单显示隐藏。昨晚我有这个系统，但是我将#selector从表单更改为div，突然停止了运行。我不得不扩展表单以获取更多附加数据，并且不想为此立即序列化所有数据，因为这将给系统带来额外压力。该页面按预期工作。它显示了第一个选择，允许我选择一个选项，我可以看到AJAX发布，但是哈希值是空的，我相信这会破坏上面的PH…