图片识别加速,从 10 秒变为 1 秒,是怎么做到的呢? | 小程序云开发

Posted 腾讯云·云开发CloudBase

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了图片识别加速,从 10 秒变为 1 秒,是怎么做到的呢? | 小程序云开发相关的知识,希望对你有一定的参考价值。

沪江 CCtalk 前端开发工程师,Taro 框架的 issue 维护志愿者,主要侧重于前端 UI 编写和团队文档建设。本文讲解的是我的快快戴口罩小程序中核心逻辑,如何给人脸戴上口罩,也就是使用腾讯云的人脸识别中的五官分析来实现的。

技术图片

基本步骤

  1. 用户选择图片
  2. 图片裁切,借助canvas 来实现
  3. canvas 图片转换为小程序的图片
  4. 图片转换为 base64 数据
  5. 上传 base64 到腾讯云后进行五官识别

先来 2 个小问题

问题 1:第一个要处理的问题,是从小程序侧直接上传还是传给个人服务器或云端后再转发呢?小程序侧直接上传

  • 我们就需要在微信公众平台上配置多个腾讯云的域名,比如 iai.tencentcloudapi.com、 tiia.tencentcloudapi.com 等
  • 还需要依赖用户那边的网络速度,还有小程序侧请求还是挺容易失败的,会让小程序的体验大打折扣
  • 如果一个功能上有多个网络请求,比如人脸识别、五官分析、智能美颜,那小程序侧去请求,直接就消耗了用户大量流量啦。

传给个人服务器或云端后再转发

  • 无需在微信公众平台上配置多个腾讯云的域名
  • 可以合并多个网络请求,依托个人服务器或云端稳定的网络环境做到更快速的请求响应

问题 2:在个人服务器和小程序云开发上,我是如何选择的?最近比较火的概念就是 Serverless,简单来说就是,不借助运维手段就可以直接调用服务器上的数据库、文件以及其他资源。而我在这次小程序开发中的个人服务器当中做了如下设置

  1. 购买了一个域名并备案,设置了二级域名,为二级域名设置了 HTTP SSL 证书
  2. 购买了一个腾讯云的云服务器,在上面安装了 nginx、nodejs 等基础软件
  3. 在启动了基于 nodejs 的 express.js 写的简单的 Rest API 服务后,借助于 nginx 将来自二级域名的请求转发到 node 站点上

先说花销上,域名每年需要几十元、服务器也需要几十元或几百元不等,网站备案也需要各种限制,比如在上海的话就需要户口或居住证,在江苏的话就需要江苏的手机号码。再说运维上,我不仅要设置上述的基础功能,还要考虑设置出测试环境、正式环境,还要考虑服务的稳定性。这就是我为何选择小程序云·开发的原因了。因为免费、高效、稳定云开发提供了几大基础能力支持:

  • 云函数——在云端运行的代码,微信私有协议天然鉴权,开发者只需编写自身业务逻辑代码
  • 数据库——一个既可在小程序前端操作,也能在云函数中读写的 JSON 数据库
  • 存储——在小程序前端直接上传/下载云端文件,在云开发控制台可视化管理
  • 云调用——原生微信服务集成 基于云函数免鉴权使用小程序开放接口的能力,包括服务端调用、获取开放数据等能力

在小程序侧免费开通云开发,配额如下:

技术图片

对于新手或实验性项目来说,这个配合足够用。如果想升级,小程序还提供了非常完整的升级方案。具体可以在下面这个链接上进行查看。https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference/quota.html那么最为吸引我使用小程序云开发的理由是啥呢?那么最为吸引我使用小程序云开发的理由是啥呢?以 nodejs 为载体的云开发环境可以高度自定义。

  • wx-server-sdk来调用小程序开放接口
  • tcb-admin-node让你可以在服务端(如腾讯云云函数或 CVM 等)使用 Node.js 服务访问 TCB 的的服务。
  • tencentcloud-sdk-nodejs,调用腾讯云的诸多服务,如人脸识别、五官分析等等
  • 甚至说,上面这些都可以自己改代码,自定义功能实现,比如我最开始使用五官分析时,需要更换腾讯云的签名方法,而tencentcloud-sdk-nodejs的 npm 版尚未支持,我就下载代码下载,自己改好再用。

正文开始

第一版 VS 第四版

第一版:个人服务器版本,图片大约为 1.2~2M第四版:云开发版本,以云存储 fileID 为载体

技术图片

技术图片

使用 canvas 的canvasToTempFilePath 进行图片压缩,格式为 jpg,质量为 0.8,在安卓手机上图片会从 1.2-2MB 降为 150KB 以下,该图也是本地显示的原图。使用小程序的compressImage(质量 0.1)来压缩图片,在 iPhone 上效果良好,在安卓系统上效果不大,但这里我们也可以使用。即使质量很低,足够图片审核、五官分析所用的。使用临时上传图片为载体、以 fileID 为云函数调用的标志时,云函数调用的体积较小,云存储的上传下载都非常稳定。图片安全 和五官分析可以同时请求,但使用 Promise.allSettled() 同时来请求。这里解决了三个问题:

  • 云函数调用有时长限制,需要修改 app.json 的 timeout,否则云函数调用会直接报错,即使后续云开发环境有数据返回。
  • 图片审核大小限制 500KB
  • 五官分析在 base64 数据大于 1MB 时需要更换签名方法为TC3-HMAC-SHA256

那么效果如何呢?总使用时间大约为 5 秒,其中请求时间约为 3 秒。

备注:
用时为云开发的本地开发模式测得,云端调用速度更快 总使用时间:从图片压缩开始,经过调用云函数,云函数识别出五官信息,返回后小程序处理五官信息,渲染口罩效果的用时。
请求时间:从小程序调用云函,云函数识别出五官信息、返回到小程序侧的用时。

第四版 VS 第五版

第四版:云开发版本,以云存储 fileID 为中间载体第五版:云开发版本,以 base64 数据直接请求

技术图片

技术图片

不使用云存储作为传递载体,而是使用图片压缩后的不大于 150KB 大小的 base64 数据直接请求,减少了小程序侧图片上传、云开发环境中的图片下载两个异步操作的步骤。小程序侧也有 ArrayBuffer 数据,但在本地开发过程中发现,只要其大小超过 50KB(猜的),云函数调用就会直接报错。

PS:我这个小程序的图片识别只是暂时的请求数据,并未需要将图片上传到云存储,让用户下次还能看到这个图片。

那么效果如何呢?总使用时间大约为 3 秒以内,其中请求时间约为 0.8-1.2 秒。

结论

  • 本地识别,需要原图
  • 五官识别轮廓就行,图片审核用低质量图片即可
  • 图片压缩,想办法压缩到能用的最低
  • 异步请求的数量要减少,可以直接传递最终数据,但数据要小

小程序五个版本的细节

  • 第一版:个人服务器版本

    • 总使用时间大约为 13 秒,请求花了 10 秒
    • 需要本地开发后,git 上传代码,服务器上安装 nodejs 依赖,pm2 启动,很麻烦,
    • 未区分测试环境和正式环境,要是实际使用,必须得再配置,每次使用也很麻烦。
    • 在个人服务上用 nginx 转发,再用 nodejs 接收
    • nginx 默认限制大小,所以得改大小
    • 调用腾讯云服务,1M 以上需要改签名方法
    • canvas 转换为图片,再转换为 base64 编码,大小通常为 1.2-2M
    • 向个人服务器发送 API 请求,数据为 base64 编码
    • 小程序
    • 个人服务器
    • 效果
  • 第二版,云开发,直接上传 base64

    • 总使用时间大约为 11 秒
    • 请求时间长,本地开发很容易失败,因为 timeout 得调整大于 10 秒,我改为 20 秒
    • 开发体验比个人服务器好了很多,基本上在微信开发者工具与 Visual Code 上切换即可
    • 五官分析,使用 base64 编码。由于此时大于 1M,需要更换签名方法
    • canvas 转换为图片,再转换为 base64 编码,大小通常为 1.2-2M
    • 调用云函数,数据为 base64 编码
    • 小程序
    • 云开发云函数
    • 效果
  • 第三版,云开发基础上,改用云存储转发

    • 总使用时间大约为 8 秒
    • 使用 fileID 存储,以及向云函数发送 fileID,安全性更高,因为云开发的存储需要腾讯云权限
    • 接收五官信息
    • 利用 fileID 删除云存储上的图片
    • 利用 fileID 下载图片内容,转换为 base 格式
    • 五官分析,使用 base64 编码。由于此时大于 1M,需要更换签名方法
    • canvas 转化为图片,
    • 云调用 uploadFile 上传云存储,返回 fileID
    • 调用云函数,数据为 fileID
    • 小程序
    • 云开发云函数
    • 小程序
    • 效果
  • 第四版:大幅度压缩图片,云存储 fileID 为中间载体

    • 总使用时间大约为 6 秒,其中请求时间约为 4 秒
    • 加入 canvas 图片压缩,效果非常明显
    • 微信图片压缩,安卓上效果不明显
    • 设置五官信息,若图片审核失败,就报错
    • 利用 fileID 删除云存储上的图片
    • 使用 fileID 从云开发的存储里下载文件
    • Promise.allSettled 异步全返回
    • 图片审核-使用 Buffer
    • 五官分析-使用 base64 格式
    • canvas 转换为图片,注意要图片压缩,设置格式为 jpg,质量为 0.8
    • 小程序,图片压缩,安卓上效果不大?但此时图片大小约在 150k 以下
    • 上传文件到云开发环境,获得 fileID
    • 调用云函数,数据为 fileID
    • 小程序
    • 云开发云函数
    • 小程序
    • 效果
  • 第五版本

    • 总使用时间约为 2-3 秒,请求时间在 1.2 秒以内,通常为 0.8 秒
    • 比第四版相比,省去图片上传下载的过程,节约了请求时间,但相应的,安全性不那么高
    • 优化方案为,base64 数据可以加密。
    • 设置五官信息,若图片审核失败,就报错
    • Promise.allSettled 异步全返回
    • 图片审核-使用 Buffer
    • 五官分析-使用 base64 格式
    • canvas 转换为图片,注意要图片压缩,设置格式为 jpg,质量为 0.8
    • 小程序,图片压缩质量为 0.1,安卓上效果不大
    • 图片转换为 base64 格式,大小小于 150k
    • 调用云函数,数据为 base64 格式
    • 小程序
    • 云开发云函数
    • 小程序
    • 效果

文章相关内容:

珍爱生命,从我做起,快点戴上口罩,给大家介绍我开源的 Taro + 腾讯云开发 小程序「快快戴口罩」它可以智能识别人脸,给集体照戴上口罩。(* ̄︶ ̄)

采用 Taro 跨端框架,采用腾讯云开发模式,采用基于腾讯云的五官分析的人脸识别,实现了自动为头像戴上口罩的功能。源码地址:快快戴口罩源码主要功能

  • 智能识别人脸,进行五官定位
  • 支持多人识别
  • 支持添加加油图片

扫码预览微信搜一搜:快快戴口罩

技术图片

小程序截图

技术图片

以上是关于图片识别加速,从 10 秒变为 1 秒,是怎么做到的呢? | 小程序云开发的主要内容,如果未能解决你的问题,请参考以下文章

免费好用的图片识别小程序,纸质文档转换成电子档用微信这个免费功能只要3秒!

批量识别图中文字自动命名,让你1秒找到骚图

每 10 秒获取一次 PARTIAL_WAKELOCK

前端加载超大图片(100M以上)实现秒开解决方案

记录--前端加载超大图片(100M以上)实现秒开解决方案

教你30秒去掉图片上的遮挡方法,怎么把照片上的遮挡物去掉!