[PHP] 纯文本查看 复制代码
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
h1 {
color: #333;
}
label {
display: block;
margin: 20px auto;
cursor: pointer;
}
#imageDisplay {
max-width: 300px;
max-height: 300px;
margin: 10px auto;
}
#fileInput {
display: none;
}
#textOutput {
margin: 20px auto;
padding: 10px;
width: 80%;
max-width: 500px;
resize: none;
}
button {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<h1>图像文字识别</h1>
<label for="fileInput">
<img id="imageDisplay" alt="Selected Image">
<br>
<input type="file" id="fileInput" accept="image/*">
<br>
<span>选择图片</span>
</label>
<br>
<textarea id="textOutput" rows="4" cols="50" placeholder="识别结果将显示在这里"></textarea>
<br>
<button>一键复制</button>
<script>
// 监听文件输入框的变化，读取选中的图片并显示在页面上
document.getElementById('fileInput').addEventListener('change', function () {
var file = this.files[0];
var reader = new FileReader();
reader.onload = function (e) {
document.getElementById('imageDisplay').src = e.target.result;
var imageData = e.target.result.split(',')[1]; // 提取base64数据
sendDataToServer(imageData);
};
reader.readAsDataURL(file);
});
// 将图片数据发送到服务器进行OCR识别，并将识别结果显示在文本框中
function sendDataToServer(imageData) {
var data = {
'base64': imageData,
'options': {
"tbpu.parser": "none",
"data.format": "txet",
"ocr.angle": false,
"ocr.language": "简体中文",
"ocr.maxSideLen": 1024
}
};
var dataJson = JSON.stringify(data);
var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://127.0.0.1:1224/api/ocr', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
var texts = response.data.map(function (item) {
return item.text;
});
document.getElementById('textOutput').value = texts.join('\n');
}
};
xhr.send(dataJson);
}
// 复制文本框中的文本到剪贴板
function copyText() {
var textOutput = document.getElementById('textOutput');
textOutput.select();
document.execCommand('copy');
}
</script>
</body>
</html>
