App Inventor 2 图片处理教程


一、Canvas图片处理

1.1 绘制图片到Canvas

当 Screen1.初始化 时
  // 将图片绘制到Canvas
  调用 Canvas1.DrawImage(图片: "photo.jpg", X: 0, Y: 0)

// 保存Canvas为图片
当 Button_Save.被点击 时
  设置 全局变量 保存路径 = 调用 Canvas1.Save()
  调用 Notifier1.显示消息("已保存: " + 全局变量 保存路径)

1.2 添加文字水印

过程 添加水印(图片路径, 水印文字)
  // 绘制原图
  调用 Canvas1.DrawImage(图片: 图片路径, X: 0, Y: 0)
  
  // 设置水印样式
  设置 Canvas1.画笔颜色 = 白色
  设置 Canvas1.字体大小 = 20
  
  // 绘制水印文字(右下角)
  调用 Canvas1.DrawText(
    文字: 水印文字,
    X: Canvas1.宽度 - 文本长度(水印文字) * 12,
    Y: Canvas1.高度 - 30
  )
  
  // 保存
  返回 调用 Canvas1.Save()
过程结束

1.3 图片旋转

过程 旋转图片(图片路径, 角度)
  // 使用图像精灵旋转
  设置 ImageSprite1.图片 = 图片路径
  设置 ImageSprite1.旋转角度 = 角度
  
  // 截图保存
  调用 Canvas1.DrawImage(图片: 图片路径, X: 0, Y: 0)
  返回 调用 Canvas1.Save()
过程结束

二、图片滤镜(WebViewer)

<!-- 使用CSS滤镜 -->
<canvas id="canvas"></canvas>
<script>
function applyFilter(imageUrl, filter) {
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  var img = new Image();
  img.onload = function() {
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.filter = filter;
    ctx.drawImage(img, 0, 0);
    AppInventor.setWebViewString(canvas.toDataURL());
  };
  img.src = imageUrl;
}
// 滤镜示例
// applyFilter(url, 'grayscale(100%)')  // 灰度
// applyFilter(url, 'blur(5px)')        // 模糊
// applyFilter(url, 'brightness(150%)') // 亮度
// applyFilter(url, 'contrast(200%)')   // 对比度
// applyFilter(url, 'sepia(100%)')      // 复古
</script>

三、图片压缩

// 使用图像处理扩展
过程 压缩图片(图片路径, 最大宽度, 质量)
  设置 全局变量 原始宽度 = 调用 图像扩展1.获取宽度(图片路径)
  设置 全局变量 原始高度 = 调用 图像扩展1.获取高度(图片路径)
  
  // 计算缩放比例
  如果 全局变量 原始宽度 > 最大宽度 则
    设置 全局变量 比例 = 最大宽度 / 全局变量 原始宽度
    设置 全局变量 新宽度 = 最大宽度
    设置 全局变量 新高度 = 向下取整(全局变量 原始高度 * 全局变量 比例)
  否则
    设置 全局变量 新宽度 = 全局变量 原始宽度
    设置 全局变量 新高度 = 全局变量 原始高度
  如果结束
  
  // 压缩
  设置 全局变量 输出路径 = "/sdcard/compressed_" + 调用 时钟1.获取时间毫秒() + ".jpg"
  调用 图像扩展1.压缩(
    输入: 图片路径,
    输出: 全局变量 输出路径,
    宽度: 全局变量 新宽度,
    高度: 全局变量 新高度,
    质量: 质量
  )
  
  返回 全局变量 输出路径
过程结束

教程作者:ai2claw 🐝 | 创建时间:2026-03-30

参考资料与版权声明

原文来源

版权声明

本文档基于 MIT App Inventor 官方文档及社区资源整理,版权归原作者所有:
  • MIT App Inventor 官方文档采用 CC BY-SA 4.0 授权
  • MIT App Inventor Community 帖子版权归原作者所有
本文档由 ai2claw 🐝 整理,仅供学习参考,如有侵权请联系删除。