fix crop
This commit is contained in:
@@ -23,11 +23,54 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-2 col-form-label">Foto KTP</label>
|
||||
<div class="col-sm-6">
|
||||
<?php if(!empty($data_cek['foto_ktp'])): ?>
|
||||
<img id="preview_ktp" src="foto/ktp/<?php echo $data_cek['foto_ktp']; ?>" width="200px" style="border: 2px solid #6c757d; padding: 3px; border-radius: 5px; cursor: pointer; display:block;" class="mb-2">
|
||||
<?php else: ?>
|
||||
<img id="preview_ktp" src="dist/img/noimage.png" width="200px" style="border: 2px solid #6c757d; padding: 3px; border-radius: 5px; display:block;" class="mb-2">
|
||||
<?php endif; ?>
|
||||
|
||||
<input type="file" class="form-control mb-2" id="foto_ktp" name="foto_ktp" accept=".jpg, .jpeg, .png">
|
||||
<button type="button" class="btn btn-info btn-block" id="btnScanKTP">
|
||||
<i class="fas fa-magic"></i> Scan Ulang dengan AI
|
||||
</button>
|
||||
<small class="text-muted">Pilih foto, crop, lalu scan.</small>
|
||||
<input type="hidden" id="foto_cropped" name="foto_cropped">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal Crop -->
|
||||
<div class="modal fade" id="modalCrop" tabindex="-1" role="dialog" aria-labelledby="modalCropLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="modalCropLabel">Potong & Putar Foto</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="img-container" style="max-height: 500px;">
|
||||
<img id="image-to-crop" src="" style="max-width: 100%; display: block;">
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" id="btnRotateLeft" title="Putar Kiri"><i class="fas fa-undo"></i></button>
|
||||
<button type="button" class="btn btn-secondary" id="btnRotateRight" title="Putar Kanan"><i class="fas fa-redo"></i></button>
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
|
||||
<button type="button" class="btn btn-primary" id="btnCrop">Potong & Simpan</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-2 col-form-label">NIK</label>
|
||||
<div class="col-sm-6">
|
||||
<input type="text" class="form-control" id="nik" name="nik" value="<?php echo $data_cek['nik']; ?>"
|
||||
/>
|
||||
required>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -40,7 +83,7 @@
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-2 col-form-label">TTL</label>
|
||||
<label class="col-sm-2 col-form-label">Tempat/Tanggal Lahir</label>
|
||||
<div class="col-sm-3">
|
||||
<input type="text" class="form-control" id="tempat_lh" name="tempat_lh" value="<?php echo $data_cek['tempat_lh']; ?>"
|
||||
/>
|
||||
@@ -58,11 +101,12 @@
|
||||
<option value="">-- Pilih jekel --</option>
|
||||
<?php
|
||||
//menhecek data yg dipilih sebelumnya
|
||||
if ($data_cek['jekel'] == "LK") echo "<option value='LK' selected>LK</option>";
|
||||
else echo "<option value='LK'>LK</option>";
|
||||
//menhecek data yg dipilih sebelumnya
|
||||
if ($data_cek['jekel'] == "LK") echo "<option value='LK' selected>LAKI-LAKI</option>";
|
||||
else echo "<option value='LK'>LAKI-LAKI</option>";
|
||||
|
||||
if ($data_cek['jekel'] == "PR") echo "<option value='PR' selected>PR</option>";
|
||||
else echo "<option value='PR'>PR</option>";
|
||||
if ($data_cek['jekel'] == "PR") echo "<option value='PR' selected>PEREMPUAN</option>";
|
||||
else echo "<option value='PR'>PEREMPUAN</option>";
|
||||
?>
|
||||
</select>
|
||||
</div>
|
||||
@@ -72,7 +116,31 @@
|
||||
<label class="col-sm-2 col-form-label">Desa</label>
|
||||
<div class="col-sm-6">
|
||||
<input type="text" class="form-control" id="desa" name="desa" value="<?php echo $data_cek['desa']; ?>"
|
||||
/>
|
||||
required>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-2 col-form-label">Kecamatan</label>
|
||||
<div class="col-sm-6">
|
||||
<input type="text" class="form-control" id="kecamatan" name="kecamatan" value="<?php echo $data_cek['kecamatan']; ?>"
|
||||
required>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-2 col-form-label">Kabupaten</label>
|
||||
<div class="col-sm-6">
|
||||
<input type="text" class="form-control" id="kabupaten" name="kabupaten" value="<?php echo $data_cek['kabupaten']; ?>"
|
||||
required>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-2 col-form-label">Provinsi</label>
|
||||
<div class="col-sm-6">
|
||||
<input type="text" class="form-control" id="provinsi" name="provinsi" value="<?php echo $data_cek['provinsi']; ?>"
|
||||
required>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -123,26 +191,19 @@
|
||||
<label class="col-sm-2 col-form-label">Pekerjaan</label>
|
||||
<div class="col-sm-6">
|
||||
<input type="text" class="form-control" id="pekerjaan" name="pekerjaan" value="<?php echo $data_cek['pekerjaan']; ?>"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-2 col-form-label">Foto KTP</label>
|
||||
<div class="col-sm-6">
|
||||
<?php if(!empty($data_cek['foto_ktp'])): ?>
|
||||
<img src="foto/ktp/<?php echo $data_cek['foto_ktp']; ?>" width="200px" style="border: 2px solid #6c757d; padding: 3px; border-radius: 5px; cursor: pointer;" onclick="showImage(this.src)" title="Klik untuk memperbesar">
|
||||
<?php else: ?>
|
||||
<img src="dist/img/noprofile.png" width="200px" style="border: 2px solid #6c757d; padding: 3px; border-radius: 5px;">
|
||||
<?php endif; ?>
|
||||
required>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-2 col-form-label">Ubah Foto</label>
|
||||
<label class="col-sm-2 col-form-label">Kewarganegaraan</label>
|
||||
<div class="col-sm-6">
|
||||
<input type="file" class="form-control" id="foto_ktp" name="foto_ktp">
|
||||
<input type="text" class="form-control" id="kewarganegaraan" name="kewarganegaraan" value="<?php echo $data_cek['kewarganegaraan']; ?>"
|
||||
required>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<input type="submit" name="Ubah" value="Simpan" class="btn btn-success">
|
||||
@@ -151,50 +212,286 @@
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Preview Image
|
||||
window.addEventListener('load', function() {
|
||||
// Cropper Logic
|
||||
var cropper;
|
||||
var image = document.getElementById('image-to-crop');
|
||||
var inputImage = document.getElementById('foto_ktp');
|
||||
var modal = $('#modalCrop');
|
||||
|
||||
inputImage.addEventListener('change', function(e) {
|
||||
var files = e.target.files;
|
||||
var done = function(url) {
|
||||
inputImage.value = ''; // Clear
|
||||
image.src = url;
|
||||
modal.modal('show');
|
||||
};
|
||||
var reader;
|
||||
var file;
|
||||
var url;
|
||||
|
||||
if (files && files.length > 0) {
|
||||
file = files[0];
|
||||
if (URL) {
|
||||
done(URL.createObjectURL(file));
|
||||
} else if (FileReader) {
|
||||
reader = new FileReader();
|
||||
reader.onload = function(e) {
|
||||
done(reader.result);
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
modal.on('shown.bs.modal', function() {
|
||||
cropper = new Cropper(image, {
|
||||
aspectRatio: 1.58,
|
||||
viewMode: 1,
|
||||
autoCropArea: 1,
|
||||
});
|
||||
}).on('hidden.bs.modal', function() {
|
||||
cropper.destroy();
|
||||
cropper = null;
|
||||
});
|
||||
|
||||
document.getElementById('btnRotateLeft').addEventListener('click', function() {
|
||||
cropper.rotate(-90);
|
||||
});
|
||||
document.getElementById('btnRotateRight').addEventListener('click', function() {
|
||||
cropper.rotate(90);
|
||||
});
|
||||
|
||||
document.getElementById('btnCrop').addEventListener('click', function() {
|
||||
var canvas;
|
||||
if (cropper) {
|
||||
canvas = cropper.getCroppedCanvas({ width: 1000 });
|
||||
var base64 = canvas.toDataURL('image/jpeg');
|
||||
|
||||
var output = document.getElementById('preview_ktp');
|
||||
output.src = base64;
|
||||
|
||||
document.getElementById('foto_cropped').value = base64;
|
||||
modal.modal('hide');
|
||||
}
|
||||
});
|
||||
|
||||
// Scan
|
||||
document.getElementById('btnScanKTP').addEventListener('click', function() {
|
||||
var fileInput = document.getElementById('foto_ktp');
|
||||
var croppedVal = document.getElementById('foto_cropped').value;
|
||||
|
||||
if(fileInput.files.length === 0 && !croppedVal) {
|
||||
Swal.fire('Info', 'Silakan pilih foto KTP baru terlebih dahulu.', 'warning');
|
||||
return;
|
||||
}
|
||||
|
||||
var btn = this;
|
||||
var originalText = btn.innerHTML;
|
||||
btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Menganalisa...';
|
||||
btn.disabled = true;
|
||||
|
||||
var formData = new FormData();
|
||||
var croppedData = document.getElementById('foto_cropped').value;
|
||||
|
||||
if (croppedData) {
|
||||
// Convert Base64 to Blob
|
||||
var byteString = atob(croppedData.split(',')[1]);
|
||||
var ab = new ArrayBuffer(byteString.length);
|
||||
var ia = new Uint8Array(ab);
|
||||
for (var i = 0; i < byteString.length; i++) {
|
||||
ia[i] = byteString.charCodeAt(i);
|
||||
}
|
||||
var blob = new Blob([ab], { type: 'image/jpeg' });
|
||||
formData.append('image', blob, 'cropped_ktp_edit.jpg');
|
||||
} else if (fileInput.files.length > 0) {
|
||||
formData.append('image', fileInput.files[0]);
|
||||
} else {
|
||||
// Handle case where specific file input is empty but user wants to rescan existing?
|
||||
// Currently flow requires NEW photo for scan.
|
||||
Swal.fire('Info', 'Belum ada foto baru yang dipilih / dicrop.', 'warning');
|
||||
btn.disabled = false;
|
||||
btn.innerHTML = originalText;
|
||||
return;
|
||||
}
|
||||
|
||||
formData.append('type', 'ktp');
|
||||
|
||||
fetch('admin/api/ocr_helper.php', {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if(data.success) {
|
||||
var d = data.data;
|
||||
// Show Confirmation
|
||||
Swal.fire({
|
||||
title: 'Hasil Scan AI',
|
||||
html: `
|
||||
<div style="text-align: left; font-size: 0.9rem;">
|
||||
<table class="table table-bordered table-sm">
|
||||
<tr><td width="30%">NIK</td><td><b>${d.nik || '-'}</b></td></tr>
|
||||
<tr><td>Nama</td><td><b>${d.nama || '-'}</b></td></tr>
|
||||
<tr><td>TTL</td><td>${d.tempat_lh || '-'}, ${d.tgl_lh || '-'}</td></tr>
|
||||
<tr><td>JK</td><td>${d.je_kel || '-'}</td></tr>
|
||||
<tr><td>RT/RW</td><td>${d.rt || '000'}/${d.rw || '000'}</td></tr>
|
||||
<tr><td>Desa</td><td>${d.desa || '-'}</td></tr>
|
||||
<tr><td>Kecamatan</td><td>${d.kecamatan || '-'}</td></tr>
|
||||
<tr><td>Kabupaten</td><td>${d.kabupaten || '-'}</td></tr>
|
||||
<tr><td>Provinsi</td><td>${d.provinsi || '-'}</td></tr>
|
||||
<tr><td>Warga Negara</td><td>${d.kewarganegaraan || '-'}</td></tr>
|
||||
</table>
|
||||
<p class="mb-0 text-muted">Perbarui data formulir?</p>
|
||||
</div>
|
||||
`,
|
||||
icon: 'question',
|
||||
showCancelButton: true,
|
||||
confirmButtonText: 'Ya, Update',
|
||||
cancelButtonText: 'Batal'
|
||||
}).then((result) => {
|
||||
if (result.value) {
|
||||
// Auto-fill logic
|
||||
if(d.nik) document.getElementsByName('nik')[0].value = d.nik;
|
||||
if(d.nama) document.getElementsByName('nama')[0].value = d.nama;
|
||||
if(d.tempat_lh) document.getElementsByName('tempat_lh')[0].value = d.tempat_lh;
|
||||
if(d.tgl_lh) document.getElementsByName('tgl_lh')[0].value = d.tgl_lh;
|
||||
if(d.je_kel) {
|
||||
var jkSelect = document.getElementsByName('jekel')[0];
|
||||
for (var i = 0; i < jkSelect.options.length; i++) {
|
||||
// Check value (LK/PR) or Text
|
||||
if (jkSelect.options[i].value === d.je_kel || jkSelect.options[i].text === d.je_kel) {
|
||||
jkSelect.selectedIndex = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
if(d.desa) document.getElementsByName('desa')[0].value = d.desa;
|
||||
if(d.kecamatan) document.getElementsByName('kecamatan')[0].value = d.kecamatan;
|
||||
if(d.kabupaten) document.getElementsByName('kabupaten')[0].value = d.kabupaten;
|
||||
if(d.provinsi) document.getElementsByName('provinsi')[0].value = d.provinsi;
|
||||
document.getElementsByName('rt')[0].value = d.rt || '000';
|
||||
document.getElementsByName('rw')[0].value = d.rw || '000';
|
||||
if(d.agama) document.getElementsByName('agama')[0].value = d.agama;
|
||||
if(d.kewarganegaraan) document.getElementsByName('kewarganegaraan')[0].value = d.kewarganegaraan;
|
||||
|
||||
if(d.status) {
|
||||
var kawinSelect = document.getElementsByName('kawin')[0];
|
||||
for (var i = 0; i < kawinSelect.options.length; i++) {
|
||||
if (kawinSelect.options[i].text === d.status || kawinSelect.options[i].text.includes(d.status)) {
|
||||
kawinSelect.selectedIndex = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
if(d.pekerjaan) document.getElementsByName('pekerjaan')[0].value = d.pekerjaan;
|
||||
|
||||
Swal.fire('Berhasil!', 'Data formulir telah diperbarui.', 'success');
|
||||
}
|
||||
});
|
||||
} else {
|
||||
Swal.fire('Gagal', data.message, 'error');
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
console.error(err);
|
||||
Swal.fire('Error', 'Terjadi kesalahan: ' + err.message, 'error');
|
||||
})
|
||||
.finally(() => {
|
||||
btn.innerHTML = originalText;
|
||||
btn.disabled = false;
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<?php
|
||||
|
||||
if (isset ($_POST['Ubah'])){
|
||||
|
||||
$sumber = @$_FILES['foto_ktp']['tmp_name'];
|
||||
$target = 'foto/ktp/';
|
||||
$nama_file = @$_FILES['foto_ktp']['name'];
|
||||
$pindah = move_uploaded_file($sumber, $target.$nama_file);
|
||||
$sumber = @$_FILES['foto_ktp']['tmp_name'];
|
||||
$has_new_photo = false;
|
||||
|
||||
if(!empty($sumber)){
|
||||
// Cek Crop
|
||||
if (!empty($_POST['foto_cropped'])) {
|
||||
$data = $_POST['foto_cropped'];
|
||||
$parts = explode(',', $data);
|
||||
$data = $parts[1];
|
||||
$data = base64_decode($data);
|
||||
$nama_file = "KTP-" . time() . ".jpg";
|
||||
file_put_contents($target . $nama_file, $data);
|
||||
$has_new_photo = true;
|
||||
} elseif (!empty($sumber)) {
|
||||
// Normal Upload
|
||||
move_uploaded_file($sumber, $target.$nama_file);
|
||||
$has_new_photo = true;
|
||||
}
|
||||
|
||||
// Sanitize Input
|
||||
$id_pend = mysqli_real_escape_string($koneksi, $_POST['id_pend']);
|
||||
$nik = mysqli_real_escape_string($koneksi, $_POST['nik']);
|
||||
$nama = mysqli_real_escape_string($koneksi, $_POST['nama']);
|
||||
$tempat_lh = mysqli_real_escape_string($koneksi, $_POST['tempat_lh']);
|
||||
$tgl_lh = mysqli_real_escape_string($koneksi, $_POST['tgl_lh']);
|
||||
$jekel = mysqli_real_escape_string($koneksi, $_POST['jekel']);
|
||||
$desa = mysqli_real_escape_string($koneksi, $_POST['desa']);
|
||||
$rt = mysqli_real_escape_string($koneksi, $_POST['rt']);
|
||||
$rw = mysqli_real_escape_string($koneksi, $_POST['rw']);
|
||||
$agama = mysqli_real_escape_string($koneksi, $_POST['agama']);
|
||||
$kawin = mysqli_real_escape_string($koneksi, $_POST['kawin']);
|
||||
$pekerjaan = mysqli_real_escape_string($koneksi, $_POST['pekerjaan']);
|
||||
$kecamatan = mysqli_real_escape_string($koneksi, $_POST['kecamatan']);
|
||||
$kabupaten = mysqli_real_escape_string($koneksi, $_POST['kabupaten']);
|
||||
$provinsi = mysqli_real_escape_string($koneksi, $_POST['provinsi']);
|
||||
$kewarganegaraan = mysqli_real_escape_string($koneksi, $_POST['kewarganegaraan']);
|
||||
|
||||
if($has_new_photo){
|
||||
$foto= $data_cek['foto_ktp'];
|
||||
if (file_exists("foto/ktp/$foto")){
|
||||
unlink("foto/ktp/$foto");}
|
||||
|
||||
$sql_ubah = "UPDATE tb_pdd SET
|
||||
nik='".$_POST['nik']."',
|
||||
nama='".$_POST['nama']."',
|
||||
tempat_lh='".$_POST['tempat_lh']."',
|
||||
tgl_lh='".$_POST['tgl_lh']."',
|
||||
jekel='".$_POST['jekel']."',
|
||||
desa='".$_POST['desa']."',
|
||||
rt='".$_POST['rt']."',
|
||||
rw='".$_POST['rw']."',
|
||||
agama='".$_POST['agama']."',
|
||||
kawin='".$_POST['kawin']."',
|
||||
pekerjaan='".$_POST['pekerjaan']."',
|
||||
foto_ktp='".$nama_file."'
|
||||
WHERE id_pend='".$_POST['id_pend']."'";
|
||||
nik='$nik',
|
||||
nama='$nama',
|
||||
tempat_lh='$tempat_lh',
|
||||
tgl_lh='$tgl_lh',
|
||||
jekel='$jekel',
|
||||
desa='$desa',
|
||||
rt='$rt',
|
||||
rw='$rw',
|
||||
agama='$agama',
|
||||
kawin='$kawin',
|
||||
pekerjaan='$pekerjaan',
|
||||
kecamatan='$kecamatan',
|
||||
kabupaten='$kabupaten',
|
||||
provinsi='$provinsi',
|
||||
kewarganegaraan='$kewarganegaraan',
|
||||
foto_ktp='$nama_file'
|
||||
WHERE id_pend='$id_pend'";
|
||||
$query_ubah = mysqli_query($koneksi, $sql_ubah);
|
||||
|
||||
}elseif(empty($sumber)){
|
||||
}else{
|
||||
$sql_ubah = "UPDATE tb_pdd SET
|
||||
nik='".$_POST['nik']."',
|
||||
nama='".$_POST['nama']."',
|
||||
tempat_lh='".$_POST['tempat_lh']."',
|
||||
tgl_lh='".$_POST['tgl_lh']."',
|
||||
jekel='".$_POST['jekel']."',
|
||||
desa='".$_POST['desa']."',
|
||||
rt='".$_POST['rt']."',
|
||||
rw='".$_POST['rw']."',
|
||||
agama='".$_POST['agama']."',
|
||||
kawin='".$_POST['kawin']."',
|
||||
pekerjaan='".$_POST['pekerjaan']."'
|
||||
WHERE id_pend='".$_POST['id_pend']."'";
|
||||
nik='$nik',
|
||||
nama='$nama',
|
||||
tempat_lh='$tempat_lh',
|
||||
tgl_lh='$tgl_lh',
|
||||
jekel='$jekel',
|
||||
desa='$desa',
|
||||
rt='$rt',
|
||||
rw='$rw',
|
||||
agama='$agama',
|
||||
kawin='$kawin',
|
||||
pekerjaan='$pekerjaan',
|
||||
kecamatan='$kecamatan',
|
||||
kabupaten='$kabupaten',
|
||||
provinsi='$provinsi',
|
||||
kewarganegaraan='$kewarganegaraan'
|
||||
WHERE id_pend='$id_pend'";
|
||||
$query_ubah = mysqli_query($koneksi, $sql_ubah);
|
||||
}
|
||||
mysqli_close($koneksi);
|
||||
|
||||
Reference in New Issue
Block a user