128 lines
5.1 KiB
PHP
128 lines
5.1 KiB
PHP
|
<?php
|
||
|
|
// 测试裁剪保存功能
|
||
|
|
require_once 'config.php';
|
||
|
|
|
||
|
|
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['ticket_crop'])) {
|
||
|
|
$base64 = $_POST['ticket_crop'];
|
||
|
|
if (strlen($base64) > 100) {
|
||
|
|
$path = saveBase64Image($base64, TICKET_DIR, 'test_crop');
|
||
|
|
if ($path) {
|
||
|
|
echo "✅ 保存成功: <a href='/$path' target='_blank'>查看图片</a>";
|
||
|
|
} else {
|
||
|
|
echo "❌ 保存失败，检查目录权限和 fileinfo 扩展";
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
echo "⚠️ 数据太短，可能未裁剪";
|
||
|
|
}
|
||
|
|
exit;
|
||
|
|
}
|
||
|
|
?>
|
||
|
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>测试裁剪</title>
|
||
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.css">
|
||
|
|
<style>
|
||
|
|
body { font-family: sans-serif; max-width: 600px; margin: 40px auto; padding: 20px; }
|
||
|
|
img { max-width: 100%; }
|
||
|
|
.btn { padding: 8px 16px; background: #3498db; color: #fff; border: none; border-radius: 4px; cursor: pointer; }
|
||
|
|
.modal { display: none; position: fixed; top:0; left:0; right:0; bottom:0; background: rgba(0,0,0,0.5); z-index:999; justify-content:center; align-items:center; }
|
||
|
|
.modal.active { display: flex; }
|
||
|
|
.modal-content { background: #fff; padding: 20px; max-width: 600px; width: 90%; }
|
||
|
|
.modal-footer { margin-top: 16px; display: flex; gap: 12px; justify-content: flex-end; }
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>测试裁剪保存</h1>
|
||
|
|
<p>请上传一张图片，裁剪后提交，检查是否保存成功。</p>
|
||
|
|
<div>
|
||
|
|
<input type="file" id="upload" accept="image/*">
|
||
|
|
<br><br>
|
||
|
|
<img id="preview" style="max-width:300px; display:none;">
|
||
|
|
<br>
|
||
|
|
<button id="cropBtn" style="display:none;" class="btn">✂️ 裁剪</button>
|
||
|
|
</div>
|
||
|
|
<form id="form" method="POST">
|
||
|
|
<input type="hidden" name="ticket_crop" id="ticket_crop">
|
||
|
|
<button type="submit" class="btn" style="background:#2ecc71;">提交保存</button>
|
||
|
|
</form>
|
||
|
|
<div id="result"></div>
|
||
|
|
|
||
|
|
<!-- 裁剪模态框 -->
|
||
|
|
<div class="modal" id="cropModal">
|
||
|
|
<div class="modal-content">
|
||
|
|
<h3>裁剪</h3>
|
||
|
|
<img id="cropImage" src="">
|
||
|
|
<div class="modal-footer">
|
||
|
|
<button class="btn" onclick="closeCrop()">取消</button>
|
||
|
|
<button class="btn" onclick="cropSave()" style="background:#2ecc71;">确认裁剪</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.js"></script>
|
||
|
|
<script>
|
||
|
|
let cropper = null;
|
||
|
|
document.getElementById('upload').addEventListener('change', function(e) {
|
||
|
|
const file = e.target.files[0];
|
||
|
|
if (!file) return;
|
||
|
|
const reader = new FileReader();
|
||
|
|
reader.onload = function(ev) {
|
||
|
|
const img = document.getElementById('preview');
|
||
|
|
img.src = ev.target.result;
|
||
|
|
img.style.display = 'block';
|
||
|
|
document.getElementById('cropBtn').style.display = 'inline-block';
|
||
|
|
};
|
||
|
|
reader.readAsDataURL(file);
|
||
|
|
});
|
||
|
|
|
||
|
|
document.getElementById('cropBtn').addEventListener('click', function() {
|
||
|
|
const img = document.getElementById('cropImage');
|
||
|
|
img.src = document.getElementById('preview').src;
|
||
|
|
document.getElementById('cropModal').classList.add('active');
|
||
|
|
if (cropper) cropper.destroy();
|
||
|
|
setTimeout(() => {
|
||
|
|
cropper = new Cropper(img, { aspectRatio: NaN, viewMode: 1, dragMode: 'move', autoCropArea: 0.8 });
|
||
|
|
}, 150);
|
||
|
|
});
|
||
|
|
|
||
|
|
function closeCrop() {
|
||
|
|
document.getElementById('cropModal').classList.remove('active');
|
||
|
|
if (cropper) { cropper.destroy(); cropper = null; }
|
||
|
|
}
|
||
|
|
|
||
|
|
function cropSave() {
|
||
|
|
if (!cropper) return;
|
||
|
|
const canvas = cropper.getCroppedCanvas({ width: 400, height: 400 });
|
||
|
|
if (!canvas) return;
|
||
|
|
const base64 = canvas.toDataURL('image/jpeg', 0.9);
|
||
|
|
document.getElementById('ticket_crop').value = base64;
|
||
|
|
document.getElementById('preview').src = base64;
|
||
|
|
closeCrop();
|
||
|
|
}
|
||
|
|
|
||
|
|
document.getElementById('form').addEventListener('submit', function(e) {
|
||
|
|
e.preventDefault();
|
||
|
|
const base64 = document.getElementById('ticket_crop').value;
|
||
|
|
if (base64.length < 100) {
|
||
|
|
document.getElementById('result').innerHTML = '⚠️ 请先裁剪图片';
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
const formData = new FormData();
|
||
|
|
formData.append('ticket_crop', base64);
|
||
|
|
fetch('test_crop.php', {
|
||
|
|
method: 'POST',
|
||
|
|
body: formData
|
||
|
|
})
|
||
|
|
.then(res => res.text())
|
||
|
|
.then(html => {
|
||
|
|
document.getElementById('result').innerHTML = html;
|
||
|
|
})
|
||
|
|
.catch(err => {
|
||
|
|
document.getElementById('result').innerHTML = '❌ 请求失败: ' + err.message;
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|