App Inventor 2 图片处理教程 - 缩放、裁剪、存储与转换

• 概述
• 图片选择
  • 使用ImagePicker
  • 使用FilePicker（选择任意文件）
  • 使用Camera拍照
• 图片缩放
  • 方案一：Canvas缩放（推荐）
  • 方案二：等比缩放
  • 方案三：WebView + Canvas缩放（精确控制）
• 图片存储
  • 保存到应用私有目录
  • 保存到相册
  • 使用FileTools扩展
• 图片裁剪
  • Canvas裁剪
  • WebView裁剪（支持手势框选）
• 图片格式转换
  • Canvas转Base64
  • Base64转图片
• 实战案例：头像上传
  • 功能需求
  • 积木块代码
• 常见问题
  • Q1: 图片显示变形怎么办？
  • Q2: 大图片导致OOM（内存溢出）？
  • Q3: 图片保存到相册后手机相册看不到？
  • Q4: 如何获取图片的宽高？
• 总结

« 返回首页

概述

本文介绍App Inventor 2中常见的图片处理需求：

• 图片缩放（等比/固定尺寸）
• 图片存储到本地/相册
• 图片格式转换
• Canvas绘制图片
• 图片选择和裁剪

图片选择

使用ImagePicker

ImagePicker让用户从手机相册选择图片：

when 按钮_选择图片.Click() {
  图像选择器1.Picture()
}
when 图像选择器1.AfterPicking(路径) {
  if 路径 != "" {
    图像1.Picture = 路径
    标签_路径.Text = join("图片路径：", 路径)
  }
}

使用FilePicker（选择任意文件）

当 按钮_选择文件.被点击
  调用 文件选择器1.选择文件()

当 文件选择器1.选择完成(路径)
  如果 路径 以 ".jpg" 结尾 或 路径 以 ".png" 结尾
    设 图像1.图片 = 路径

使用Camera拍照

when 按钮_拍照.Click() {
  照相机1.TakePicture()
}
when 照相机1.AfterPicture(图片路径) {
  图像1.Picture = 图片路径
}

图片缩放

方案一：Canvas缩放（推荐）

通过Canvas将图片绘制到指定尺寸：

设 原始图片路径 = ""
设 目标宽度 = 200
设 目标高度 = 200

当 按钮_缩放.被点击
  设 画布1.画布宽度 = 目标宽度
  设 画布1.画布高度 = 目标高度
  调用 画布1.清除()
  调用 画布1.绘制图片(原始图片路径, 0, 0, 目标宽度, 目标高度)

当 按钮_保存缩放图.被点击
  设 缩放后图片 = 调用 画布1.保存图片()
  标签_结果.文本 = "已保存：" & 缩放后图片

方案二：等比缩放

保持宽高比的缩放：

定义 等比缩放尺寸(原图宽, 原图高, 最大边长) 返回 尺寸字典
  如果 原图宽 ≥ 原图高
    设 缩放比 = 最大边长 / 原图宽
    设 新宽 = 最大边长
    设 新高 = 数学.向下取整(原图高 * 缩放比)
  否则
    设 缩放比 = 最大边长 / 原图高
    设 新高 = 最大边长
    设 新宽 = 数学.向下取整(原图宽 * 缩放比)
  返回 创建字典("width" → 新宽, "height" → 新高)

方案三：WebView + Canvas缩放（精确控制）

使用HTML5 Canvas进行高质量缩放：

<!-- resize.html -->
<canvas id="canvas"></canvas>
<script>
function resizeImage(dataUrl, maxW, maxH) {
  var img = new Image();
  img.onload = function() {
    var ratio = Math.min(maxW / img.width, maxH / img.height);
    var w = Math.floor(img.width * ratio);
    var h = Math.floor(img.height * ratio);
    var canvas = document.getElementById('canvas');
    canvas.width = w;
    canvas.height = h;
    var ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0, w, h);
    window.AppInventor.setWebViewString(canvas.toDataURL('image/jpeg', 0.8));
  };
  img.src = dataUrl;
}
</script>

图片存储

保存到应用私有目录

when 按钮_保存.Click() {
  // Canvas保存到应用目录
  var 保存路径 = "/sdcard/AppInventor/Assets/my_image.png"
  画布1.Save()
  标签_结果.Text = join("已保存到：", 保存路径)
}

保存到相册

使用FileTools扩展或File组件：

// 方案1：使用File组件复制到相册目录
when 按钮_保存到相册.Click() {
  var 源路径 = 画布1.Save()
  var 目标路径 = join("/sdcard/DCIM/Camera/my_photo_", 计时器1.FormatDateTime(计时器1.Now(), "yyyyMMdd_HHmmss"), ".png")
  文件管理器1.SaveFile(文件管理器1.ReadFrom(源路径), 目标路径)
}
when 文件管理器1.SaveFile(文件名) {
  标签_结果.Text = join("✅ 已保存到相册：", 文件名)
}

注意：Android 10+的分区存储限制，直接写入DCIM目录可能需要特殊权限。推荐使用FileTools扩展的 SaveFileToGallery 方法。

使用FileTools扩展

FileTools扩展 提供了直接保存图片到相册的方法：

when 按钮_保存到相册.Click() {
  文件管理器_Tools1.SaveFile(图片路径, "MyAppPhotos")
}

图片裁剪

Canvas裁剪

设 裁剪起点X = 50
设 裁剪起点Y = 50
设 裁剪宽度 = 200
设 裁剪高度 = 200

当 按钮_裁剪.被点击
  ' 在Canvas上绘制裁剪区域
  设 Canvas2.画布宽度 = 裁剪宽度
  设 Canvas2.画布高度 = 裁剪高度
  调用 Canvas2.清除()
  ' drawImage的源区域参数
  调用 Canvas2.绘制图片部分(图像1.图片, 
    裁剪起点X, 裁剪起点Y, 裁剪宽度, 裁剪高度,
    0, 0, 裁剪宽度, 裁剪高度)

WebView裁剪（支持手势框选）

更灵活的方式是在WebView中用JavaScript实现图片裁剪，支持拖拽选择区域。

图片格式转换

Canvas转Base64

when 按钮_转Base64.Click() {
  var base64数据 = 画布1.Save()
  标签_结果.Text = base64数据
}

Base64转图片

when 按钮_转图片.Click() {
  图像1.Picture = join("data:image/png;base64,", 文本输入框_Base64.Text)
}

实战案例：头像上传

功能需求

• 从相册选择或拍照获取头像
• 等比缩放到200x200
• 圆形裁剪
• 上传到服务器

积木块代码

设 头像路径 = ""

当 按钮_选择头像.被点击
  调用 图像选择器1.选择图片()

当 图像选择器1.选择完成(路径)
  如果 路径 ≠ ""
    设 头像路径 = 路径
    ' 缩放到200x200
    设 画布1.画布宽度 = 200
    设 画布1.画布高度 = 200
    调用 画布1.清除()
    调用 画布1.绘制图片(路径, 0, 0, 200, 200)
    设 图像_预览.图片 = 画布1.保存图片()

当 按钮_上传头像.被点击
  设 base64 = 调用 画布1.保存图片为Base64()
  ' 通过Web1上传
  调用 Web客户端1.执行Post请求("https://api.example.com/upload/avatar",
    "image=" & base64)

当 Web客户端1.收到文本(响应内容)
  如果 响应内容 = "success"
    标签_提示.文本 = "✅ 头像上传成功"
  否则
    标签_提示.文本 = "❌ 上传失败"

常见问题

Q1: 图片显示变形怎么办？

使用等比缩放，不要强制拉伸。Image组件设置 ScalePictureToFit = true 可以自动等比缩放。

Q2: 大图片导致OOM（内存溢出）？

App Inventor处理大图片（>5MB）容易崩溃。解决方案：

• 先用Canvas缩小到合理尺寸（如1024x1024）
• 使用WebView方案处理大图
• 避免同时加载多张大图

Q3: 图片保存到相册后手机相册看不到？

需要通知系统扫描新文件。使用FileTools扩展的 scanFile 方法：

文件管理器_Tools1.扫描文件(保存路径)

或者重启手机后才会出现。

Q4: 如何获取图片的宽高？

App Inventor内置组件不直接提供图片尺寸信息。可以用WebView获取：

var img = new Image();
img.onload = function() {
  window.AppInventor.setWebViewString(img.width + "," + img.height);
};
img.src = imagePath;

总结

版权声明：MIT App Inventor 官方文档采用 CC BY-SA 4.0 授权，本文档由 ai2claw 🐝 整理。