Tạo ứng dụng nhận dạng chữ trên app mobile bằng nativescript

Thứ Ba, 09/06/2020

Tram Ho

Để code được app Mobile đơn giản thì không khó.

Hello Word

Chúng ta sẽ truy cập trang https://play.nativescript.org/ chọn mục new , tùy vào khẩu vị ngôn ngữ gì, hiện tại mình sẽ chọn mục NS + Vue.js

Click Preview góc phải màn hình, để quét mã QR code, chúng ta phải tải app của nativeScript để có thể hiển thị Preview.

2 app cần tải là playground và preview của nativescript. Playground để quét mã QR, còn preview là app hiển thị.

Bây giờ chúng ta sẽ có giao diện realtime đồng bộ những đoạn code trên nền tảng đó.

OCR Đơn giản

Nhận dạng chữ, hóa đơn thuộc lĩnh vực về AI, mình sẽ ko đi sâu phần này mà dùng 1 API free cung cấp từ bên thứ 3 để detected chúng, do hình ảnh ở đây có text tiếng việt nên độ chính xác không cao vì mình để default config của API này là tiếng anh. Xài tàm tạm cho vui.

Source Code: https://play.nativescript.org/?template=play-vue&id=kjPTc7&v=8

Trước hết chúng ta sẽ khởi tạo chức năng chụp ảnh cho ứng dụng của mình

&lt;template&gt;
    &lt;Page class="page"&gt;
        &lt;ActionBar&gt;
            &lt;StackLayout orientation="horizontal"&gt;
                &lt;Image src="res://icon" width="40" height="40"
                    verticalAlignment="center" /&gt;
                &lt;Label text="OCR NativeScript-Vue" fontSize=" 24"
                    verticalAlignment="center" /&gt;
            &lt;/StackLayout&gt;
        &lt;/ActionBar&gt;

        &lt;ScrollView&gt;
            &lt;StackLayout class="home-panel"&gt;
                &lt;Button text="Take Picture" @tap="takePicture" /&gt;
                &lt;Image :src="img" width="1000" /&gt;
                &lt;Button text="Detected OCR" @tap="ocrDetected" /&gt;
                &lt;Label :text="result" /&gt;
            &lt;/StackLayout&gt;
        &lt;/ScrollView&gt;
    &lt;/Page&gt;
&lt;/template&gt;

<Image src="res://icon" width="40" height="40"

verticalAlignment="center" />

<Label text="OCR NativeScript-Vue" fontSize=" 24"

verticalAlignment="center" />

</StackLayout>

</ActionBar>

</StackLayout>

</ScrollView>

</Page>

</template>

<span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
    <span class="token comment">// sử dụng thư viện để truy cập camera</span>
    <span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> camera <span class="token keyword">from</span> <span class="token string">"nativescript-camera"</span><span class="token punctuation">;</span>
    <span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> bghttp <span class="token keyword">from</span> <span class="token string">"nativescript-background-http"</span><span class="token punctuation">;</span>
    <span class="token comment">// module lấy ảnh</span>
    <span class="token keyword">const</span> imageSourceModule <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"tns-core-modules/image-source"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">// module file lưu trữ của ảnh</span>
    <span class="token keyword">const</span> fileSystemModule <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"tns-core-modules/file-system"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
        <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">return</span> <span class="token punctuation">{</span>
                textFieldValue<span class="token punctuation">:</span> <span class="token string">""</span><span class="token punctuation">,</span>

                img<span class="token punctuation">:</span> <span class="token string">""</span><span class="token punctuation">,</span>
                data<span class="token punctuation">:</span> <span class="token punctuation">{</span>
                    ParsedResults<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">]</span>
                <span class="token punctuation">}</span><span class="token punctuation">,</span>
                result<span class="token punctuation">:</span> <span class="token string">""</span><span class="token punctuation">,</span>
                options<span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
                xxx<span class="token punctuation">:</span> <span class="token string">""</span>
            <span class="token punctuation">}</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>

        methods<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        <span class="token comment">// hàm để bắt sự kiện click chụp ảnh sau đó lưu ảnh lại với tên, lưu cả đường dẫn path</span>
            <span class="token function">takePicture</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                camera
                    <span class="token punctuation">.</span><span class="token function">requestPermissions</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
                    <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
                        camera
                            <span class="token punctuation">.</span><span class="token function">takePicture</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
                                width<span class="token punctuation">:</span> <span class="token number">300</span><span class="token punctuation">,</span>
                                height<span class="token punctuation">:</span> <span class="token number">300</span><span class="token punctuation">,</span>
                                keepAspectRatio<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
                                saveToGallery<span class="token punctuation">:</span> <span class="token boolean">true</span>
                            <span class="token punctuation">}</span><span class="token punctuation">)</span>
                            <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>imageAsset <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
                                <span class="token keyword">this</span><span class="token punctuation">.</span>img <span class="token operator">=</span> imageAsset<span class="token punctuation">;</span>
                                <span class="token keyword">let</span> temp<span class="token punctuation">;</span>
                                <span class="token keyword">const</span> source <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">imageSourceModule<span class="token punctuation">.</span>ImageSource</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                                source<span class="token punctuation">.</span><span class="token function">fromAsset</span><span class="token punctuation">(</span>imageAsset<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>
                                    imageSource <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
                                        <span class="token keyword">const</span> folder <span class="token operator">=</span>
                                            fileSystemModule<span class="token punctuation">.</span>knownFolders
                                            <span class="token punctuation">.</span><span class="token function">documents</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
                                            <span class="token punctuation">.</span>path<span class="token punctuation">;</span>
                                        <span class="token keyword">const</span> fileName <span class="token operator">=</span>
                                            <span class="token string">"test.png"</span><span class="token punctuation">;</span>
                                        <span class="token keyword">const</span> path <span class="token operator">=</span>
                                            fileSystemModule<span class="token punctuation">.</span>path
                                            <span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span>
                                                folder<span class="token punctuation">,</span>
                                                fileName
                                            <span class="token punctuation">)</span><span class="token punctuation">;</span>
                                        <span class="token keyword">const</span> saved <span class="token operator">=</span> imageSource
                                            <span class="token punctuation">.</span><span class="token function">saveToFile</span><span class="token punctuation">(</span>
                                                path<span class="token punctuation">,</span>
                                                <span class="token string">"jpeg"</span>
                                            <span class="token punctuation">)</span><span class="token punctuation">;</span>
                                        <span class="token comment">// alert(saved);</span>

                                        <span class="token keyword">if</span> <span class="token punctuation">(</span>saved<span class="token punctuation">)</span> <span class="token punctuation">{</span>
                                            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>
                                                <span class="token string">"Image saved successfully!"</span>
                                            <span class="token punctuation">)</span><span class="token punctuation">;</span>
                                            <span class="token keyword">this</span><span class="token punctuation">.</span>xxx <span class="token operator">=</span> path<span class="token punctuation">;</span>
                                        <span class="token punctuation">}</span>
                                    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                            <span class="token punctuation">}</span><span class="token punctuation">)</span>
                            <span class="token punctuation">.</span><span class="token keyword">catch</span><span class="token punctuation">(</span>e <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
                                console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"error:"</span><span class="token punctuation">,</span> e<span class="token punctuation">)</span><span class="token punctuation">;</span>
                            <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                    <span class="token punctuation">}</span><span class="token punctuation">)</span>
                    <span class="token punctuation">.</span><span class="token keyword">catch</span><span class="token punctuation">(</span>e <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
                        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"Error requesting permission"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            
            <span class="token comment">// hàm để detected OCR với file name this.xxx, dịch vụ API này là mình dùng của space OCR, các bạn có thể truy cập trang         // chủ của họ để lấy api miễn phí, detect nhiều loại ngôn ngữ khác nhau, ở đây mình default là tiếng anh</span>
            <span class="token function">ocrDetected</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                <span class="token keyword">let</span> session <span class="token operator">=</span> bghttp<span class="token punctuation">.</span><span class="token function">session</span><span class="token punctuation">(</span><span class="token string">"image-upload"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

                <span class="token keyword">let</span> request <span class="token operator">=</span> <span class="token punctuation">{</span>
                    url<span class="token punctuation">:</span> <span class="token string">"https://api.ocr.space/parse/image"</span><span class="token punctuation">,</span>
                    method<span class="token punctuation">:</span> <span class="token string">"POST"</span><span class="token punctuation">,</span>
                    headers<span class="token punctuation">:</span> <span class="token punctuation">{</span>
                        <span class="token string">"Content-Type"</span><span class="token punctuation">:</span> <span class="token string">"application/octet-stream"</span><span class="token punctuation">,</span>
                        <span class="token string">"File-Name"</span><span class="token punctuation">:</span> <span class="token string">"image"</span>
                    <span class="token punctuation">}</span><span class="token punctuation">,</span>
                    description<span class="token punctuation">:</span> <span class="token string">"sadsadsa"</span>
                <span class="token punctuation">}</span><span class="token punctuation">;</span>
                <span class="token comment">// alert(this.xxx);</span>
                <span class="token keyword">let</span> params <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
                        name<span class="token punctuation">:</span> <span class="token string">"apikey"</span><span class="token punctuation">,</span>
                        value<span class="token punctuation">:</span> <span class="token string">"ad7a02939588957"</span>
                    <span class="token punctuation">}</span><span class="token punctuation">,</span>
                    <span class="token punctuation">{</span>
                        name<span class="token punctuation">:</span> <span class="token string">"language"</span><span class="token punctuation">,</span>
                        value<span class="token punctuation">:</span> <span class="token string">"eng"</span>
                    <span class="token punctuation">}</span><span class="token punctuation">,</span>
                    <span class="token punctuation">{</span>
                        name<span class="token punctuation">:</span> <span class="token string">"isOverlayRequired"</span><span class="token punctuation">,</span>
                        value<span class="token punctuation">:</span> <span class="token string">"true"</span>
                    <span class="token punctuation">}</span><span class="token punctuation">,</span>
                    <span class="token punctuation">{</span>
                        name<span class="token punctuation">:</span> <span class="token string">"url"</span><span class="token punctuation">,</span>
                        filename<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>xxx<span class="token punctuation">,</span>
                        mimeType<span class="token punctuation">:</span> <span class="token string">"image/jpeg"</span>
                    <span class="token punctuation">}</span>
                <span class="token punctuation">]</span><span class="token punctuation">;</span>

                <span class="token keyword">let</span> task <span class="token operator">=</span> session<span class="token punctuation">.</span><span class="token function">multipartUpload</span><span class="token punctuation">(</span>params<span class="token punctuation">,</span> request<span class="token punctuation">)</span><span class="token punctuation">;</span>

                <span class="token comment">// task.on("progress", logEvent);</span>
                <span class="token comment">// task.on("error", logEvent);</span>
                task<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">"responded"</span><span class="token punctuation">,</span> respondedHandler<span class="token punctuation">)</span><span class="token punctuation">;</span>

                <span class="token keyword">function</span> <span class="token function">logEvent</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token punctuation">{</span>
                    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token punctuation">}</span>
                
                <span class="token comment">// đoạn này mình bắt thông tin trả về từ API đã detect được qua alert cho đơn giản</span>
                <span class="token keyword">function</span> <span class="token function">respondedHandler</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token punctuation">{</span>
                    <span class="token keyword">let</span> data <span class="token operator">=</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>e<span class="token punctuation">.</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
                    <span class="token keyword">this</span><span class="token punctuation">.</span>result <span class="token operator">=</span> data<span class="token punctuation">.</span>ParsedResults<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>ParsedText<span class="token punctuation">;</span>
                    <span class="token function">alert</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>result<span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

// sử dụng thư viện để truy cập camera

import * as camera from "nativescript-camera";

import * as bghttp from "nativescript-background-http";

// module lấy ảnh

const imageSourceModule = require("tns-core-modules/image-source");

// module file lưu trữ của ảnh

const fileSystemModule = require("tns-core-modules/file-system");

export default {

data() {

return {

textFieldValue: "",

img: "",

data: {

ParsedResults: [{}]

},

result: "",

options: {},

xxx: ""

};

},

methods: {

// hàm để bắt sự kiện click chụp ảnh sau đó lưu ảnh lại với tên, lưu cả đường dẫn path

takePicture() {

camera

.requestPermissions()

.then(() => {

camera

.takePicture({

width: 300,

height: 300,

keepAspectRatio: true,

saveToGallery: true

})

.then(imageAsset => {

this.img = imageAsset;

let temp;

const source = new imageSourceModule.ImageSource();

source.fromAsset(imageAsset).then(

imageSource => {

const folder =

fileSystemModule.knownFolders

.documents()

.path;

const fileName =

"test.png";

const path =

fileSystemModule.path

.join(

folder,

fileName

);

const saved = imageSource

.saveToFile(

path,

"jpeg"

);

// alert(saved);

if (saved) {

console.log(

"Image saved successfully!"

);

this.xxx = path;

}

});

})

.catch(e => {

console.log("error:", e);

});

})

console.log("Error requesting permission");

});

},

// hàm để detected OCR với file name this.xxx, dịch vụ API này là mình dùng của space OCR, các bạn có thể truy cập trang // chủ của họ để lấy api miễn phí, detect nhiều loại ngôn ngữ khác nhau, ở đây mình default là tiếng anh

ocrDetected() {

let session = bghttp.session("image-upload");

let request = {

url: "https://api.ocr.space/parse/image",

method: "POST",

headers: {

"Content-Type": "application/octet-stream",

"File-Name": "image"

},

description: "sadsadsa"

};

// alert(this.xxx);

let params = [{

value: "ad7a02939588957"

},

{

value: "eng"

},

{

value: "true"

},

{

filename: this.xxx,

mimeType: "image/jpeg"

}

];

let task = session.multipartUpload(params, request);

// task.on("progress", logEvent);

// task.on("error", logEvent);

task.on("responded", respondedHandler);

function logEvent(e) {

console.log(e);

}

// đoạn này mình bắt thông tin trả về từ API đã detect được qua alert cho đơn giản

function respondedHandler(e) {

let data = JSON.parse(e.data);

this.result = data.ParsedResults[0].ParsedText;

alert(this.result);

}

};

</script>

Kết luận

Đây chỉ là ví dụ đơn giản, ngoài ra chúng ta có thể kết hợp nhiều components, các chức năng khác nhau ghép vào đa dạng hóa ứng dụng của mình

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo

Tạo ứng dụng nhận dạng chữ trên app mobile bằng nativescript

Hello Word

OCR Đơn giản

Kết luận

TikTok trở thành nền tảng mảng xã hội lớn thứ hai ở Nam Phi

Mất giá nhanh nhất sau 9 tháng ra mắt, iPhone 14 Pro Max tiếp tục phá đáy tại Việt Nam

Hướng dẫn sử dụng ngôn ngữ R cho người mới bắt đầu

10 plugin cần thiết của SublimeText dành cho các lập trình viên JavaScript