阿里云函数计算OCR智能识别小程序10分钟搭建指南

2026-06-16阅读 0热度 0

小程序

结合支付宝小程序与函数计算，仅需十分钟即可构建一个轻量级、可弹性伸缩的云端OCR识别方案。下面逐步拆解完整实现流程。

背景介绍

小程序生态爆发后，轻量化应用开发成为开发者关注的核心领域。同时，后端Serverless化的弹性扩展优势日益凸显——两者深度融合，能够快速搭建高可用、高弹性的小程序后端。本教程的目标是：让零基础函数计算的开发者也能在短时间内上手，并切身感受Serverless架构带来的效率提升与运维简化。现在，就开始动手实践。

关于函数计算
阿里云函数计算是一项事件驱动的全托管计算服务。无需管理底层服务器等基础设施，只需编写代码并上传，函数计算会自动分配弹性计算资源，以高可用方式执行代码。结合函数计算与云产品的原生集成能力，开发者用少量代码就能串联多个服务，实现复杂业务逻辑，研发效率显著提升。

使用函数计算作为小程序后端，优势非常明确：

开发与部署极简：只需聚焦业务逻辑，代码即功能。
稳定性与可用性高：函数计算提供弹性、可靠的计算资源，内置按流量自动伸缩能力。
资源消耗更低：Serverless与云服务器的根本区别在于——云服务器需持续运行，而函数计算按需执行。仅有请求时才会触发函数，无请求时零资源消耗。

应用架构

整体流程如下：小程序客户端上传图片，通过HTTP trigger触发upload_ocr_image函数，该函数将文件写入OSS；OSS存入新图片后，触发process_image函数，它读取图片并调用OCR API进行文字识别与提取；最终识别结果回存至OSS。小程序客户端再次请求识别结果，通过HTTP trigger触发get_ocr_result函数，获取结果。

开发步骤

1. 开发准备

在阿里云控制台获取SecretId和SecretKey。
开通函数计算服务，并熟悉基本功能。
开启OSS服务，创建两个bucket：一个用于存储上传图片，另一个用于存储识别结果（本demo需要两个独立存储空间）。
开通OCR服务（提供免费试用额度：通用类图片文字识别），获取appcode及服务url，后续配置时直接引用。
在支付宝小程序开发平台，参照示例创建应用：体验小程序Demo。

2. 编写函数

编写HTTP请求函数

函数计算支持直接通过HTTP trigger触发，便于快速编写任意接口。本方案需要两个接口：图片上传接口与OCR结果获取接口。

图片上传接口代码：

def upload_ocr_image(environ, start_response):
    '''upload ocr image function triggered by http request'''
    try:
        content = cgi.FieldStorage(fp=environ['wsgi.input'], environ=environ, keep_blank_values=True)
        for key in content.keys():
            image_binary = content.getvalue(key)
            auth = oss2.Auth(secret_id, secret_key)
            bucket = oss2.Bucket(auth, oss_endpoint, ocr_image_bucket)
            bucket.put_object(key, image_binary)
        status = '200 OK'
        response_headers = [('Content-type', 'text/plain')]
        start_response(status, response_headers)
        return ['upload image success']
    except (ValueError):
        return ['upload_ocr_image failed']

OCR结果获取接口代码：

def get_ocr_result(environ, start_response):
    '''get ocr result function triggered by http request'''
    try:
        request_body_size = int(environ.get('CONTENT_LENGTH', 0))
        request_body = environ['wsgi.input'].read(request_body_size)
        res_json = json.loads(request_body)
        auth = oss2.Auth(secret_id, secret_key)
        bucket = oss2.Bucket(auth, oss_endpoint, ocr_text_bucket)
        ocr_res = bucket.get_object(str(res_json['key'])).read()
        status = '200 OK'
        response_headers = [('Content-type', 'text/plain')]
        start_response(status, response_headers)
        return [str(ocr_res).encode('utf8')]
    except (ValueError):
        return ['get_ocr_result failed']

编写OCR处理函数

利用OSS trigger，在有图片上传时自动触发OCR函数：

def process_image(event, context):
    ''' process image function triggered by OSS when a image file is uploaded '''
    evt = json.loads(event)
    evt = evt['events'][0]
    bucket_name = evt['oss']['bucket']['name']
    endpoint = 'oss-' + evt['region'] + '.aliyuncs.com'
    obj_key = evt['oss']['object']['key']
    logger.info('New image uploaded: ' + str(obj_key))
    creds = context.credentials
    auth = oss2.StsAuth(creds.access_key_id, creds.access_key_secret, creds.security_token)
    bucket = oss2.Bucket(auth, endpoint, bucket_name)
    image_data = bucket.get_object(obj_key).read()
    detect_word_list = detect_text(image_data)
    text_bucket = oss2.Bucket(auth, endpoint, ocr_text_bucket)
    text_bucket.put_object(obj_key + '_ocr.txt', ' '.join(detect_word_list).encode(encoding='UTF8'))
    return 'Processed image file success, text can be seen in the text bucket'

def detect_text(image_data):
    ''' 请求阿里云OCR Api '''
    encoded_image = base64.b64encode(image_data)
    detect_word_list = text_detect_api(encoded_image)
    logger.info("Detect word list : " + ' '.join(detect_word_list))
    return detect_word_list

def text_detect_api(encodestr):
    method = 'POST'
    bodys = {}
    bodys['img'] = encodestr
    bodys['prob'] = 'false'
    bodys['charInfo'] = 'false'
    bodys['rotate'] = 'false'
    bodys['table'] = 'false'
    post_data = json.dumps(bodys).encode(encoding='UTF8')
    request = urllib2.Request(ocr_api_url, post_data)
    request.add_header('Authorization', 'APPCODE ' + ocr_api_appcode)
    request.add_header('Content-Type', 'application/json; charset=UTF-8')
    ctx = ssl.create_default_context()
    ctx.check_hostname = False
    ctx.verify_mode = ssl.CERT_NONE
    response = urllib2.urlopen(request, context=ctx)
    content = response.read()
    logger.info("text detection res: " + str(content))
    word_list = []
    words_info = json.loads(content)['prism_wordsInfo']
    for info in words_info:
        word_list.append(info['word'].encode('utf8'))
    return word_list

3. 编写支付宝小程序

在OCR识别代码中，和分别对应upload_ocr_image与get_ocr_result两个函数的HTTP trigger地址（可在函数计算控制台查看）。以下是小程序核心代码片段：

// 选择并上传图片
attach() {
    my.chooseImage({
        chooseImage: 1,
        success: res => {
            const path = res.apFilePaths[0];
            console.log(path)
            var key = path
            my.uploadFile({
                url: '',
                fileType: 'image',
                fileName: key,
                filePath: path,
                success: (ret) => {
                    var start=new Date().getTime();
                    var n = 2000
                    while(true) {
                        if(new Date().getTime()- start > n) break;
                    }
                    var resKey = key + '_ocr.txt'
                    my.request({
                        url: '',
                        method: 'POST',
                        data: {key: resKey},
                        dataType: 'json',
                        success: function(Res) {
                            my.alert({ content: 'Get OCR Result = ' + Res.data});
                        },
                        fail: function(Res) {
                            my.alert({content: 'get ocr result fail:' + Res.errorMessage});
                        }
                    });
                },
            });
        },
    });
},

4. 部署函数

使用Fun工具一键部署函数。需编写函数部署YAML文件，更多模板编写细节可参考Serverless Application Model。以下是YAML配置：

ROSTemplateFormatVersion: '2015-09-01'
Transform: 'Aliyun::Serverless-2018-04-03'
Resources:
  test:
    Type: 'Aliyun::Serverless::Service'
    Properties:
      Policies:
        - AliyunOSSFullAccess # Managed Policy
        - AliyunLogFullAccess # Managed Policy
      LogConfig:
        Project: func-func-log
        Logstore: func-test
    ocr_extract:
      Type: 'Aliyun::Serverless::Function'
      Properties:
        Handler: cloud_func_ocr.process_image
        Runtime: python2.7
        Timeout: 60
        MemorySize: 512
        CodeUri: './'
    upload_image:
      Type: 'Aliyun::Serverless::Function'
      Properties:
        Handler: cloud_func_ocr.upload_ocr_image
        Runtime: python2.7
        Timeout: 60
        MemorySize: 512
        CodeUri: './'
        Events:
          http-trigger:
            Type: HTTP
            Properties:
              AuthType: ANONYMOUS
              Methods: ['GET', 'POST', 'PUT']
    get_ocr_result:
      Type: 'Aliyun::Serverless::Function'
      Properties:
        Handler: cloud_func_ocr.get_ocr_result
        Runtime: python2.7
        Timeout: 60
        MemorySize: 512
        CodeUri: './'
        Events:
          http-trigger:
            Type: HTTP
            Properties:
              AuthType: ANONYMOUS
              Methods: ['GET', 'POST', 'PUT']

请务必替换cloud_func_ocr.py代码中所有<>内的占位符为你自己的实际配置。然后在代码目录下执行命令$ fun deploy，即可一键完成函数部署。

5. 测试验证

启动小程序模拟器，选择一张图片上传，即可见到OCR识别结果成功返回。

总结

这个示例虽然简洁，但已完整展示了支付宝小程序与函数计算结合的核心模式。通过几步开发，就能快速构建弹性、高可用的云端小程序。当然，这仅是冰山一角，更多创新玩法等待你在实践中发掘。