uni-app无法直接做主体识别，因其依赖GPU加速的深度学习模型，而浏览器和WKWebView不支持完整模型加载，WebAssembly版精度低、体积大、兼容差，且canvas无语义分割能力。
uni-app 本身不提供图片主体识别与智能裁剪能力，所有 AI 图像处理必须交由后端服务或第三方云 API 完成；前端只负责上传、调用接口、接收坐标并本地裁剪（Canvas）或透传给服务端裁剪。
为什么 uni-app 不能直接做主体识别
主体识别（如 salient object detection）依赖深度学习模型（如 U2-Net、IS-Net），需 GPU 加速和大量算力，浏览器环境无法加载完整模型，WebAssembly 版本目前精度低、体积大、兼容性差（尤其 iOS WKWebView）。uni-app 的 canvas 也仅支持基础绘图，无内置语义分割能力。
可行方案：调用云端 AI 接口 + 前端 Canvas 裁剪
主流做法是上传图片到支持“智能主体抠图/裁剪”的云服务（如百度 AI、腾讯云 TI 平台、阿里云视觉智能开放平台），拿到返回的主体边界框（left, top, width, height），再在 uni-app 中用 canvas 绘制裁剪区域或生成新 canvas 图片。
- 推荐使用腾讯云
ImageProcess的detectMainBody接口（免费额度够测试）或百度 AI 的body_analysis（需开通图像理解服务） - 注意：务必在后端中转请求，避免将 API Key 暴露在前端代码里
- uni-app 中上传需用
uni.uploadFile，不要用fetch或request直传二进制（iOS 会失败） - 拿到坐标后，用
uni.canvasToTempFilePath配合drawImage实现局部绘制（不是 CSS 裁剪，否则导出模糊）
关键代码片段（uni-app + 腾讯云示例）
假设后端已封装好 /api/ai/detect-main-body，接收 file 字段并返回 { x, y, w, h }：
// 在页面 methods 中
async handleUploadAndCrop() {
const res = await uni.chooseImage({ count: 1 });
const tempFilePath = res.tempFilePaths[0];
<p>// 1. 上传到自己后端（非直连腾讯云）
const uploadRes = await uni.uploadFile({
url: '<a href="https://www.php.cn/link/bef333dfc39823e29ac4808457f06dec">https://www.php.cn/link/bef333dfc39823e29ac4808457f06dec</a>',
filePath: tempFilePath,
name: 'file',
success: (upload) => {
const data = JSON.parse(upload.data);
if (data.x !== undefined) {
this.drawCroppedImage(tempFilePath, data);
}
}
});
},</p><p>async drawCroppedImage(src, rect) {
const query = uni.createSelectorQuery().in(this);
query.select('#myCanvas').fields({ node: true, size: true }, (res) => {
const canvas = res.node;
const ctx = canvas.getContext('2d');
const dpr = uni.getSystemInfoSync().pixelRatio;
canvas.width = res.width <em> dpr;
canvas.height = res.height </em> dpr;
ctx.scale(dpr, dpr);</p><pre class="brush:php;toolbar:false;">const img = canvas.createImage();
img.src = src;
img.onload = () => {
// 按返回坐标裁剪（注意：rect 是原始图尺寸下的坐标，需等比缩放到 canvas 尺寸）
const scaleX = res.width / img.naturalWidth;
const scaleY = res.height / img.naturalHeight;
ctx.drawImage(
img,
rect.x * scaleX, rect.y * scaleY,
rect.w * scaleX, rect.h * scaleY,
0, 0,
res.width, res.height
);
uni.canvasToTempFilePath({
canvas,
success: (e) => {
console.log('裁剪后图片', e.tempFilePath);
}
}, this);
};}).exec(); }
容易踩的坑
主体识别坐标是相对于原图宽高的，但 canvas 绘制时若未做像素比（dpr）适配，iOS 上会模糊或偏移；Android 部分机型 createImage 不支持 webp，建议上传前用 uni.compressImage 转为 jpg；腾讯云返回的 y 有时是 top-left 坐标，但某些 SDK 返回的是 center 坐标，务必以文档为准并打印调试；uni-app 的 canvasToTempFilePath 在真机上必须等待 img.onload 后再调用，否则生成空白图。
