App Inventor 2 图像矫正教程 - 透视变换与文档扫描

概述
方案一：使用WebView + JavaScript库（推荐）
- 使用OpenCV.js
方案二：简化版矫正（亮度/对比度/旋转）
- HTML增强页面
方案三：使用TaifunImage扩展
实战案例：文档扫描App
- 功能
- 简化版（无边缘检测）
常见问题
- Q1: 完整的透视矫正太复杂？
- Q2: 处理速度慢？
总结

概述

图像矫正在文档扫描、白板拍摄中很常用。App Inventor没有内置图像矫正功能，需要借助扩展或WebView方案。

方案一：使用WebView + JavaScript库（推荐）

使用OpenCV.js

OpenCV.js可以在WebView中运行，提供完整的图像处理能力：

<!-- image_correct.html -->
<script src="https://docs.opencv.org/4.x/opencv.js"></script>
<canvas id="output"></canvas>
<script>
setInterval(function(){
  var msg = window.AppInventor.getWebViewString();
  if(msg && msg.startsWith("CORRECT:")){
    var base64 = msg.substring(8);
    var img = new Image();
    img.onload = function(){
      // 透视变换矫正
      var src = cv.imread(img);
      var dst = new cv.Mat();
      // 定义原始四角和目标四角
      var srcPts = cv.matFromArray(4, 1, cv.CV_32FC2, [100,50, 350,30, 380,280, 80,300]);
      var dstPts = cv.matFromArray(4, 1, cv.CV_32FC2, [0,0, 300,0, 300,400, 0,400]);
      var M = cv.getPerspectiveTransform(srcPts, dstPts);
      var dsize = new cv.Size(300, 400);
      cv.warpPerspective(src, dst, M, dsize);
      cv.imshow('output', dst);
      // 返回结果
      var resultCanvas = document.getElementById('output');
      window.AppInventor.setWebViewString("RESULT:" + resultCanvas.toDataURL());
      src.delete(); dst.delete(); M.delete();
    };
    img.src = "data:image/jpeg;base64," + base64;
  }
},100);
</script>

注意：OpenCV.js体积较大（约8MB），首次加载较慢。

方案二：简化版矫正（亮度/对比度/旋转）

如果只需要简单的图像增强而非透视矫正：

当 按钮_矫正.被点击
  设 WebView_矫正.WebView字符串 = "ENHANCE:" & 当前图片Base64

当 WebView_矫正.WebView字符串改变(值)
  如果 值 以 "RESULT:" 开头
    设 Image_结果.图片 = 替换文本(值, "RESULT:data:image/png;base64,", "")

HTML增强页面

<canvas id="output"></canvas>
<script>
setInterval(function(){
  var msg = window.AppInventor.getWebViewString();
  if(msg && msg.startsWith("ENHANCE:")){
    var base64 = msg.substring(8);
    var img = new Image();
    img.onload = function(){
      var canvas = document.getElementById('output');
      canvas.width = img.width; canvas.height = img.height;
      var ctx = canvas.getContext('2d');
      ctx.drawImage(img, 0, 0);
      // 增强对比度
      var imageData = ctx.getImageData(0,0,canvas.width,canvas.height);
      var d = imageData.data;
      var contrast = 1.5; // 对比度因子
      for(var i=0;i<d.length;i+=4){
        d[i]   = Math.min(255, Math.max(0, (d[i]-128)*contrast+128));
        d[i+1] = Math.min(255, Math.max(0, (d[i+1]-128)*contrast+128));
        d[i+2] = Math.min(255, Math.max(0, (d[i+2]-128)*contrast+128));
      }
      ctx.putImageData(imageData,0,0);
      // 转灰度（可选，模拟扫描效果）
      // ...
      window.AppInventor.setWebViewString("RESULT:" + canvas.toDataURL());
    };
    img.src = "data:image/jpeg;base64," + base64;
  }
},100);
</script>

方案三：使用TaifunImage扩展

已有 extensions/TaifunImage.md，提供旋转、缩放、裁剪等基本图像操作。

当 按钮_矫正.被点击
  ' 旋转90度
  调用 TaifunImage1.旋转("photo.jpg", 90)
  ' 裁剪
  调用 TaifunImage1.裁剪("photo.jpg", x, y, width, height)

实战案例：文档扫描App

功能

拍照
自动检测文档边缘
透视矫正
增强对比度
保存为PDF

简化版（无边缘检测）

由于边缘检测在App Inventor中很难实现，简化方案让用户手动选择四角：

设 角点列表 = 创建空列表

当 Canvas_选点.触摸(触摸, X, Y)
  如果 列表长度(角点列表) < 4
    设 角点列表 = 添加列表项(角点列表, [X, Y])
    调用 Canvas_选点.画圆(X, Y, 10, 红色)
    如果 列表长度(角点列表) = 4
      标签_状态.文本 = "已选择4个角点，可以矫正"

常见问题

Q1: 完整的透视矫正太复杂？

对于大多数场景，简单的旋转+裁剪+对比度增强已经够用。真正的透视矫正需要OpenCV或自定义扩展。

Q2: 处理速度慢？

图像处理在WebView中进行，大图片可能需要几秒。建议先缩小图片再处理。

总结

方案	功能	难度	推荐度
WebView + OpenCV.js	完整透视矫正	⭐⭐⭐⭐	⭐⭐⭐
WebView + Canvas增强	对比度/灰度	⭐⭐⭐	⭐⭐⭐⭐
TaifunImage扩展	旋转/裁剪	⭐⭐	⭐⭐⭐

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