清泛IT社区

标题: 用App Inventor 2做扫描仪App？从拍照到展示，手把手教你搭一套完整相机功能 [打印本页]

作者: App Inventor 2 时间: 7 小时前
标题: 用App Inventor 2做扫描仪App？从拍照到展示，手把手教你搭一套完整相机功能
用App Inventor 2做扫描仪App？从拍照到展示，手把手教你搭一套完整相机功能

上周有个做社区志愿服务的朋友问我："能不能用手机拍下老人的健康档案，然后直接在App里分类显示？"他需要一个轻量的、不给老人增加学习成本的拍照分类工具。我说，用App Inventor 2的照相机组件，其实半天就能搭出来。

当你准备在自己的App里加入拍照功能时，可能会发现一个问题：照相机组件拍完照片之后去哪了？照片怎么用？怎么让拍完的照片立刻显示在界面上？今天这篇教程，就是围绕这三个问题展开的。

你将学到
• 照相机（Camera）组件的核心用法：拍照与回调事件
• 拍完的照片如何显示到Image组件上
• 照片文件的存储路径管理与复用技巧
• 结合ImagePicker实现从相册选取的补充方案
• 一个完整的"拍-显-存"小应用实战

基础概念

照相机组件是什么

照相机（Camera）是App Inventor 2中一个「不可见组件」——你在设计界面上看不到它，但它会在运行时调起系统相机界面。拍照完成后，它会触发拍摄完成事件，并把照片的存储路径作为参数传回来。

核心工作流就三步：调用方法 -> 系统拍照 -> 事件回调拿路径。

[用户点击按钮] -> [Camera1.拍照()] -> [拍照界面] -> [Camera1.拍摄完成(图片路径)]

与它功能相似的还有摄像机（Camcorder）组件，用来录制视频。两者的区别仅在于一个拍照、一个录像，触发的事件分别是拍摄完成和录制完成。

照片去哪儿了？

很多新手第一次用Camera组件时会疑惑：明明调用了拍照，拍完照片了，回调事件也触发了，但照片并没有自动出现在App界面上。这是Camera组件的一个重要特性——它只返回文件路径，不负责显示。

你需要把得到的路径主动设置给某个Image组件（图像显示组件）的图片属性，才能在屏幕上看到拍摄的照片。

逐步实战

目标：做一个"拍照备忘"小应用——拍一张照片，立即在屏幕上预览，记录一段文字说明，并保存到TinyDB供后续查看。

Step 1: 界面搭建

拖入以下组件到Screen：
• 按钮("拍照") - 触发拍照
• 图像(Image1) - 显示预览，宽度填满屏幕，高度300px
• 文本输入框(备注) - 输入文字备忘
• 按钮("保存") - 存储到TinyDB
• 标签(状态标签) - 显示操作反馈
• 照相机(Camera1) - 不可见组件
• TinyDB(TinyDB1) - 本地存储

Step 2: 实现拍照逻辑

切换到逻辑设计视图，拖出积木块：
1. 当拍照按钮.被点击时，执行 Camera1.拍照()
2. 当 Camera1.拍摄完成图像位址时，将图像位址赋值给Image1.图片

核心积木拼法如下：

当按钮_拍照.被点击执行
  调用 Camera1.拍照()

当 Camera1.拍摄完成(图像位址) 执行
  设图像_预览.图片为图像位址
  设标签_状态.文本为 "照片已拍摄，可以添加备注了"

Step 3: 保存记录

点击"保存"按钮时，把照片路径和备注一起存入TinyDB。使用时间戳作为键值：

当按钮_保存.被点击执行
  定义局部变量 tag 为时钟1.当前时间()
  调用 TinyDB1.存储数据 tag 图像_预览.图片
  调用 TinyDB1.存储数据 tag + "_note" 文本输入框_备注.文本
  设标签_状态.文本为 "保存成功"

这里有个小技巧：用时钟1.当前时间() 生成的时间戳作键值，天然无重复，而且按时间排序时自然有序。

Step 4: 从相册选取（ImagePicker补充方案）

有时候用户不一定要现拍——手机相册里就有合适的照片。这时可以用 图像选择器（ImagePicker） 组件。它本质上是一个类似按钮的组件，点击后打开设备图库，选择照片后自动将路径填入选中项属性：

当图像选择器1.选择完成执行
  设图像_预览.图片为图像选择器1.选中项
  设标签_状态.文本为 "已从相册选取照片"

把ImagePicker放在"拍照"按钮旁边，让用户自己选：想现拍就点Camera，想从相册挑就用ImagePicker，体验很顺手。

常见坑点

坑1：模拟器/电脑上无法拍照
Camera组件依赖实体设备的相机硬件，AI伴侣在电脑上运行时会直接闪退或显示黑屏。解决办法：一定要在真机上测试。

坑2：照片不显示
检查Image1的属性是否设了宽高（默认是「自动」，有时会导致显示异常）。强烈建议给Image组件固定宽高。

坑3：保存到TinyDB后App重启找不到照片
TinyDB存的是路径字符串，但拍完照的文件位置在某些系统上可能会被回收。建议在生产App里将照片复制到App的专属目录，使用文件管理组件的复制文件方法确保照片长期可用。

坑4：大分辨率照片卡顿
系统相机拍的照片分辨率很高，直接设给Image组件时缩放渲染会卡。可以考虑在拍照前先调低手机相机分辨率，或者用扩展组件对图片做压缩处理。

小结

照相机组件的核心路线其实就一条：拍照 -> 拿路径 -> 显示/存储。掌握了这个三板斧，你再给它加上文字备注、图片列表浏览、导出分享等功能，一个完整的"拍照备忘"App就成型了。

更进一步，你可以把Camera和ImagePicker结合使用，让用户有"拍照"和"从相册选"两种途径获取图片。这两条路径的终点都是拿到图片路径，后续逻辑完全复用，代码冗余少、可维护性强。

如果你在社区里搜"拍照存证""扫描仪""拍照打卡"等关键词，会发现大量App都是基于这个基本框架扩展出来的。下次再有人让你帮忙做个拍照功能的小工具，你知道该怎么做了——从Camera到Image再到TinyDB，三件套搞定。

参考文档：App Inventor 2 照相机组件 / 图像选择器组件 — fun123.cn

欢迎光临清泛IT社区 (https://bbs.tsingfun.com/)