PaddlePaddle
diff --git a/‎packages/paddlejs-examples/ocrdetection/README.md‎
Lines changed: 19 additions & 0 deletions b/‎packages/paddlejs-examples/ocrdetection/README.md‎
Lines changed: 19 additions & 0 deletions
diff --git a/‎packages/paddlejs-examples/ocrdetection/README_cn.md‎
Lines changed: 18 additions & 0 deletions b/‎packages/paddlejs-examples/ocrdetection/README_cn.md‎
Lines changed: 18 additions & 0 deletions
diff --git a/‎packages/paddlejs-examples/ocrdetection/index.html‎
Lines changed: 52 additions & 0 deletions b/‎packages/paddlejs-examples/ocrdetection/index.html‎
Lines changed: 52 additions & 0 deletions
diff --git a/‎packages/paddlejs-examples/ocrdetection/index.ts‎
Lines changed: 45 additions & 0 deletions b/‎packages/paddlejs-examples/ocrdetection/index.ts‎
Lines changed: 45 additions & 0 deletions
@@ -0,0 +1,19 @@
+[中文版](./README_cn.md)
+
+# ocr_detect
+
+ocr_detect model is used to detect the text area in the image.
+
+# Usage
+
+```js
+
+import * as ocr from '@paddlejs-models/ocrdet';
+
+// Load ocr_detect model
+await ocr.load();
+
+// Get text area points
+const res = await ocr.detect(img);
+
+```
@@ -0,0 +1,18 @@
+[English](./README.md)
+
+# ocr_detect
+
+ocr_detect模型用于检测图像中文字区域。
+
+# 使用
+
+```js
+import * as ocr from '@paddlejs-models/ocrdet';
+
+// ocr_detect模型加载
+await ocr.load();
+
+// 获取文字区域坐标
+const res = await ocr.detect(img);
+
+```
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>paddle ocr detection demo</title>
+    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
+    <style>
+        body {
+            margin: 0 auto;
+            width: 100%;
+            height: 100%;
+        }
+        .wrapper {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            margin: 0 auto;
+        }
+        #isLoading {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            width: 100vw;
+            height: 100vh;
+            background-color: rgba(0, 0, 0, .5);
+        }
+        #isLoading .loading-text {
+            color: #fff;
+            font-size: 24px;
+            text-align: center;
+            line-height: 100vh;
+        }
+    </style>
+</head>
+<body>
+<div class="wrapper">
+    <img id="image1" src="https://m.baidu.com/se/static/img/iphone/logo.png">
+    <div id="tool">
+        <input type="file" id="uploadImg">
+    </div>
+    <div id="txt">...</div>
+    <canvas id="canvas"></canvas>
+</div>
+
+<div id="isLoading">
+    <p class="loading-text center">loading中……</p>
+</div>
+
+</body>
+</html>
@@ -0,0 +1,45 @@
+import * as ocr from '@paddlejs-models/ocrdet';
+
+const loading = document.getElementById('isLoading');
+const inputElement = document.getElementById('uploadImg');
+const imgElement = document.getElementById('image1') as HTMLImageElement;
+const canvasOutput = document.getElementById('canvas') as HTMLCanvasElement;
+
+load();
+
+async function load() {
+    await ocr.load();
+    loading.style.display = 'none';
+}
+
+function drawBox(points: number[]) {
+    canvasOutput.width = imgElement.naturalWidth;
+    canvasOutput.height = imgElement.naturalHeight;
+    const ctx = canvasOutput.getContext('2d');
+    ctx.drawImage(imgElement, 0, 0, canvasOutput.width, canvasOutput.height);
+    points.forEach(point => {
+        // 开始一个新的绘制路径
+        ctx.beginPath();
+        // 设置线条颜色为蓝色
+        ctx.strokeStyle = 'blue';
+        // 设置路径起点坐标
+        ctx.moveTo(point[0][0], point[0][1]);
+        ctx.lineTo(point[1][0], point[1][1]);
+        ctx.lineTo(point[2][0], point[2][1]);
+        ctx.lineTo(point[3][0], point[3][1]);
+        ctx.closePath();
+        ctx.stroke();
+    });
+}
+
+inputElement.addEventListener('change', (e: Event) => {
+    imgElement.src = URL.createObjectURL((e.target as HTMLInputElement).files[0]);
+}, false);
+
+imgElement.onload = async function () {
+    canvasOutput.width = imgElement.width;
+    canvasOutput.height = imgElement.height;
+    // 获取文本检测坐标
+    const res = await ocr.detect(imgElement);
+    drawBox(res);
+};