WD - Dev
79 lines
2.1 KiB
PHP
79 lines
2.1 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>OCR Google Vision</title>
|
|
<style>
|
|
body { font-family: sans-serif; padding: 20px; }
|
|
#preview { max-width: 300px; margin-top: 10px; }
|
|
textarea { width: 100%; height: 200px; margin-top: 10px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<h2>OCR dengan Google Vision API</h2>
|
|
|
|
<input type="file" id="imageUpload" accept="image/*"><br>
|
|
<img id="preview" src=""><br>
|
|
|
|
<button onclick="prosesOCR()">Proses OCR</button>
|
|
|
|
<h3>Hasil:</h3>
|
|
<textarea id="hasilText" readonly></textarea>
|
|
|
|
<!-- ... sebelumnya sama ... -->
|
|
|
|
<script>
|
|
const API_KEY = 'AIzaSyDb5jNjAc-xZrjdv7oSHmlaESdG8LeDuB0'; // Pastikan valid dan aktif
|
|
|
|
let base64Image = '';
|
|
|
|
document.getElementById('imageUpload').addEventListener('change', function () {
|
|
const file = this.files[0];
|
|
if (!file) return;
|
|
|
|
const reader = new FileReader();
|
|
reader.onloadend = function () {
|
|
base64Image = reader.result.replace(/^data:image\/(png|jpeg|jpg);base64,/, "");
|
|
document.getElementById('preview').src = reader.result;
|
|
};
|
|
reader.readAsDataURL(file);
|
|
});
|
|
|
|
function prosesOCR() {
|
|
if (!base64Image) {
|
|
alert("Upload gambar dulu.");
|
|
return;
|
|
}
|
|
|
|
const requestBody = {
|
|
requests: [
|
|
{
|
|
image: { content: base64Image },
|
|
features: [{ type: "TEXT_DETECTION" }]
|
|
}
|
|
]
|
|
};
|
|
|
|
fetch(`https://vision.googleapis.com/v1/images:annotate?key=${API_KEY}`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(requestBody)
|
|
})
|
|
.then(response => response.json())
|
|
.then(result => {
|
|
console.log("Full response:", result); // Debug di sini
|
|
const res = result.responses[0];
|
|
const detections = res.fullTextAnnotation?.text || res.textAnnotations?.[0]?.description || 'Tidak ada teks terdeteksi.';
|
|
document.getElementById('hasilText').value = detections;
|
|
})
|
|
.catch(err => {
|
|
console.error(err);
|
|
alert("❌ Gagal proses OCR. Lihat console log.");
|
|
});
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|