更新记录

1.0.20250929（2025-09-29）

1. 初次发版

平台兼容性

uni-app(4.45)

uni-app x(4.45)

引入插件

• 点击插件试用引入到项目
• 打包自定义基座包
• 按照下方示例测试
• 先插件试用，完全符合需求后购买

插件引入

import * as mlkitorc from '@/uni_modules/cms-mlkitorc';

插件方法

OcrTextOption

OcrTextSuccessResult

BlockTextItem

TextRect

TextPointPos

错误码

uniapp示例

<template>
    <view>
        <view class="raido_ul">
            <view v-for="item of languages " :key="item.Code" :class="{ active: item.Code == language }"
                @click="language = item.Code">
                {{item.Name}}
            </view>
        </view>

        <button type="primary" @click="onLocalImageBtnClick">解析本地图片</button>
        网络图片：<input class="url_input" v-model="netImageUrl" />
        <button type="primary" @click="onNetImageBtnClick">解析网络图片</button>

        <block v-if="imageUrl">
            <view>图片：</view>

            <!-- 图片标注 -->
            <view style="position: relative;">
                <image :src="imageUrl" mode="widthFix" style="width:100%" />
                <view v-for="(item,i) of showBlocks" :key="i" class="text_block" :style="{
                top: item.rect.top * scaleRatio + 'px',
                left: item.rect.left * scaleRatio + 'px',
                width: item.rect.width * scaleRatio + 'px',
                height: item.rect.height * scaleRatio + 'px',
                lineHeight: item.rect.height * scaleRatio + 'px',
            }" />
            </view>
        </block>

        <block v-if="showText">
            <view>文字：</view>
            <view v-html="showText"></view>
        </block>
    </view>
</template>

<script>
    import * as mlkitorc from '@/uni_modules/cms-mlkitorc';

    export default {
        data() {
            return {
                netImageUrl: "https://env-00jxt1cobn8u-static.normal.cloudstatic.cn/kuaiqucan/img/imageTextOcr.png",
                imageUrl: "",
                showText: "",
                scaleRatio: 0,
                showBlocks: [],
                language: "zh",
                languages: [
                    { Code: "zh", Name: "中文" },
                    { Code: "deva", Name: "梵文" },
                    { Code: "ko", Name: "韩文" },
                    { Code: "ja", Name: "日文" },
                    { Code: "en", Name: "英文"},
                ]
            }
        },
        methods: {
            onLocalImageBtnClick() {
                // 选择图片
                uni.chooseImage({
                    count: 1, // 仅选择1张图片
                    sizeType: ['original', 'compressed'],
                    sourceType: ['album', 'camera'],
                    success: async (res) => {
                        let absPath = plus.io.convertLocalFileSystemURL(res.tempFilePaths[0]);
                        this.ocrText(absPath) // 调用UTS识别方法
                    },
                    fail: (err) => {

                    }
                })
            },
            onNetImageBtnClick() {
                this.ocrText(this.netImageUrl)
            },
            rpx2px(rpx) {
                let screenWidth = uni.getSystemInfoSync().screenWidth;
                return Math.round(rpx * (screenWidth / 750));
            },
            ocrText(url) {
                this.imageUrl = url;
                this.showText = "";
                this.showBlocks = [];

                uni.showLoading({
                    title: "正在解析中..."
                })

                uni.getImageInfo({
                    src: url,
                    success: (res) => {
                        let setW = this.rpx2px(750);
                        this.scaleRatio = setW / res.width
                    }
                });

                mlkitorc.ocrText({
                    url: url,
                    language: this.language,
                    success: (opt) => {
                        this.showText = opt.text.replace(/\n/g, "<br/>");
                        this.showBlocks = opt.blocks;
                        uni.hideLoading()
                    },
                    fail: () => {
                        uni.hideLoading()
                    }
                })
            }
        }
    }
</script>

<style scoped lang="scss">
    .text_block {
        position: absolute;
        border: 1px solid red;
        color: red;
        text-align: center;
    }

    .url_input {
        border: 1px solid #e2e2e2;
        width: 95%;
        border-radius: 4rpx;
        margin: 10rpx auto;
        padding: 10rpx;
    }

    .raido_ul {
        display: flex;
        align-items: center;
        height: 60rpx;
        padding: 10rpx;

        >view {
            flex: 1;
            text-align: center;
            font-size: 26rpx;
            line-height: 60rpx;
        }

        >view.active {
            background: #007aff;
            color: #fff;
            border-radius: 4rpx;
        }
    }
</style>

需要帮助？有其他插件的需求？联系我！