|
在2017年初发布的教程《宝贝日记》中，我们实现了图片、声音及视频信息的记录及检索，其中的媒体文件保存在手机的存储卡中，而媒体文件的存放路径则保存在本地数据库中。《宝宝日记》是一款本地应用，它的局限性不言而喻——日记中记录的信息无法在互联网上共享。 日前一位正在备战2022应用马拉松赛的学员打算制作一款供多人共享的相册应用，具体的功能与微信的朋友圈类似。实现共享相册功能的难点在于如何将图片文件上传到互联网上，以及如何访问已经上传的图片文件。 实现这一功能的关键技术是云数据库组件的灵活使用。在2020年初发表的教程《云对讲机》中，我们使用云数据库保存过声音文件，那么图片文件是否也可以保存到云数据库中呢？答案是肯定的。本文利用一个简单的例子，来讲解图片文件在云数据库中的保存及读取。 一、用户界面设计 创建一个项目，命名为“共享相册”，向项目中添加组件，如图1所示。屏幕中左上角的文件夹图片来自于图片素材文件file.png。
图1 用户界面设计 注意：取消勾选图片选择框的允许显示属性；勾选图片组件的允许点击属性及自动缩放属性，图片的其他属性设置见图1。 此外，云数据库的三个重要属性的设置如图2所示。
图2 云数据库组件的属性设置 二、编写程序 首先来实现图片的保存功能。这里图片组件兼具两项功能，一是按钮功能——接受用户点击，二是图片功能——显示选中图片的缩略图。当用户点击图片（文件夹）时，打开图片选择框；当用户选中某个图片时，将选择结果显示在图片组件上。注意，这里使用的是图片选择框的选中项属性，而非图片属性。当用户点击保存按钮时，将选中的图片保存到云数据库中。代码如图3所示，测试结果如图4所示。
图3 编写程序：选择并保存图片
图4 测试结果 当用户点击保存按钮时，图片就被保存到云数据库中，那么，云数据库中保存的数据是什么呢？我们来测试一下，如图5所示：在连接AI伴侣的前提下，单步执行请求数据命令，当收到请求数据时，分别用文本输入框和画布组件显示返回的数据，测试结果如图6所示。
图5 向云数据库请求图片数据
图6 向云数据库请求数据的测试结果 在上述测试结果中，文本输入框中显示的是文件的路径（图片数据在本地的缓存路径），而画布中显示的是已经上传的图片。 为了证明图片已经上传到云数据库中，又另选一部手机进行测试，测试结果相同，如图7所示。
图7 用另一部手机做请求图片测试 三、对数据格式的思考 至此，在云数据库中保存图片的功能似乎已经实现了，但我仍然好奇，图片数据在云数据库中的存储格式究竟是什么呢？对于这一问题，我不得不求教于张路老师。张老师的秘密武器是查看App Inventor源码，并从源码中找到解决问题的答案。 答案是这样的：当应用向云数据库保存图片时，保存的数据格式是一个列表，列表中的第一项是图片文件的扩展名，如jpg，列表中的第二项是图片的Base64编码。 这个答案是一个大大的礼物！此前一直有开发者关心如何将图片转成Base64编码，虽然可以借助于外部插件实现这一转化，但毕竟这不是App Inventor的原生功能。现在，我们可以借助于云数据库组件，获取一张图片的Base64编码。具体的方法是：保存一张新的图片，然后在云数据库的数据被改变事件中，删除刚刚保存过的数据中的第一项，并在第一项被删除事件中，再次请求图片数据，最后，用设画布的Base64格式背景图片块来显示数据请求结果，代码如图8所示，测试结果见图9。
图8 删除图片数据中的第一项，并显示Base64格式数据
图9 测试：用画布显示Base64格式的图片 在图9的测试结果中，文本输入框中显示了部分的Base64编码，而画布上则显示了完整的图片。 这里需要提醒读者，由于云数据库服务器是供大家学习使用的服务器，其带宽和存储容量有限，因此，请大家在练习及测试时，不要上传大图，否则容易出现超时错误。 |
|
|
