浏览器端实战：HTML+JS 调用印刷体OCR识别（含本地图片预览）
# 浏览器端实战：HTML+JS 调用印刷体OCR识别（含本地图片预览）
> 接口 926（接入点 926-1） · 免费 · POST/GET · JSON · 适用人群：前端开发者、想零后端体验的用户 · 阅读时间：约 6 分钟
## 核心要点
- 纯前端单页即可调用：用户选图 → 本地预览 → 转 base64 → 调接口 → 渲染结果。
- 适合快速体验、内部小工具；**但 AppKey 会暴露在前端**，对外产品请改用后端代理。
- 配合 `need_all_region=1` 还能在画布上把每行文字框出来（见坐标篇）。
## Why：零后端也能跑通 OCR
想给团队做个「贴图出文字」的小工具，又不想搭后端？浏览器原生 File API + fetch 就够了。本文给一个复制即用的单文件 Demo，打开即用。
## What：需要的浏览器能力
| 能力 | 用途 |
|------|------|
| `<input type="file">` | 让用户选本地图片 |
| `FileReader.readAsDataURL` | 把图片读成 base64 |
| `fetch` | POST 到 `route.showapi.com/926-1` |
| `Canvas` | （可选）画文字框 |
## How：完整单页 Demo
把下面代码保存为 `ocr-demo.html`，把 `YOUR_APPKEY` 换成你的 AppKey，用浏览器打开即可。
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>印刷体OCR识别 Demo</title>
<style>body{font-family:system-ui;max-width:720px;margin:24px auto}img{max-width:100%}pre{background:#f5f5f5;padding:12px}button{margin-left:8px}</style>
</head>
<body>
<h2>印刷体OCR识别 Demo</h2>
<input type="file" id="file" accept="image/png,image/jpeg" />
<button id="run">识别</button>
<h3>预览</h3>
<img id="preview" alt="预览" />
<h3>识别结果</h3>
<pre id="out">请选择图片后点击「识别」</pre>
<script>
const APPKEY = "YOUR_APPKEY";
const fileInput = document.getElementById("file");
const preview = document.getElementById("preview");
const out = document.getElementById("out");
fileInput.addEventListener("change", (e) => {
const f = e.target.files[0];
if (!f) return;
const reader = new FileReader();
reader.onload = () => (preview.src = reader.result);
reader.readAsDataURL(f);
});
document.getElementById("run").addEventListener("click", async () => {
const f = fileInput.files[0];
if (!f) return (out.textContent = "请先选择图片");
const b64 = (await new Promise((res) => {
const r = new FileReader();
r.onload = () => res(r.result);
r.readAsDataURL(f);
})).split(",")[1]; // 去掉 data:image/...;base64, 前缀
out.textContent = "识别中…";
try {
const resp = await fetch(`https://route.showapi.com/926-1?appKey=${APPKEY}`, {
method: "POST",
headers: { "content-type": "application/x-www-form-urlencoded" },
body: new URLSearchParams({ img_base64: b64, need_all_region: "1" }),
});
const rb = (await resp.json()).showapi_res_body;
if (rb.ret_code !== 0) return (out.textContent = `失败 ${rb.ret_code}: ${rb.remark || ""}`);
const lines = (rb.list || []).map((it) => `${it.text} (置信度 ${it.confidence.toFixed(2)})`);
out.textContent = lines.join("\n") || rb.str || "(无文字)";
} catch (err) {
out.textContent = "请求异常：" + err;
}
});
</script>
</body>
</html>
```
**Python（requests，对照参考）**
```python
import base64, requests
with open("demo.png", "rb") as f:
b64 = base64.b64encode(f.read()).decode()
r = requests.post("https://route.showapi.com/926-1", params={"appKey":"YOUR_APPKEY"},
data={"img_base64": b64, "need_all_region": "1"}, timeout=10)
rb = r.json()["showapi_res_body"]
print(rb.get("list") or rb.get("str"))
```
**cURL**
```bash
B64=$(base64 -w0 demo.png)
curl -X POST "https://route.showapi.com/926-1?appKey=YOUR_APPKEY" \
-H "content-type: application/x-www-form-urlencoded" \
--data-urlencode "img_base64=$B64" --data-urlencode "need_all_region=1"
```
## 返回示例与解析
成功 `ret_code=0`，Demo 展示 `list` 中每行的 `text` 与 `confidence`；若未传 `need_all_region` 则返回 `str`，Demo 也会兜底显示。
## 进阶 / 边界
- **安全红线**：AppKey 明文在前端，仅适合本地体验/内部工具；对外发布务必改为后端代理调用（见客服赋能篇）。
- **大小限制**：base64 上限 0.7M、像素 < 1200×1200；选图过大需先压缩。
- **画框扩展**：把 `list` 的 `text_region` 画到 Canvas 上即可做校对界面（代码见坐标篇）。
## FAQ
**Q1：打开页面点击识别报跨域（CORS）？**
A1：接口需支持跨域；若本地 `file://` 打开遇到限制，可用任意静态服务器（如 `python -m http.server`）托管该 HTML 再访问。
**Q2：AppKey 暴露了怎么办？**
A2：到 [AppKey 管理页](https://www.showapi.com/console#/myApp) 重置密钥；对外产品用后端代理，前端不持有密钥。
**Q3：能识别手机拍的竖图吗？**
A3：可以，只要像素 < 1200×1200、格式 jpg/png、大小合规；过大先压缩。
**Q4：为什么结果里有时是 list 有时是 str？**
A4：由你是否传 `need_all_region=1` 决定；Demo 传了 1，所以走 `list`，未传则走 `str`。
## 相关能力 / 下一步阅读
- [印刷体OCR识别：用 need_all_region 获取每行文字坐标与置信度](https://www.showapi.com/guides/printed-ocr-coordinates-926)
- [印刷体OCR识别：img_base64 与 img_url 两种入参怎么选？](https://www.showapi.com/guides/printed-ocr-base64-vs-url-926)
- [5 分钟接入印刷体OCR识别：从注册到第一条识别结果](https://www.showapi.com/guides/printed-ocr-quickstart-926)
- **本系列共 12 篇**：查看[印刷体OCR识别指南总目录](https://www.showapi.com/guides/printed-ocr-guides-926)
