React中基于Clarifai API裁剪人脸并保存为变量的技术求助

核心方案 #

先通过人脸检测API获取人脸坐标，用Canvas裁剪出单张人脸并转为Clarifai支持的base64格式，再逐个传入人种分类API。

步骤实现 #

1. 调整API调用顺序
   必须先完成人脸检测拿到坐标，再处理裁剪和人种分类，避免并行调用的时序问题。

2. 编写Canvas裁剪函数
   实现一个异步函数，接收原图URL和人脸坐标，返回裁剪后的base64字符串：

   async function cropFace(imageUrl, faceBox) {
     return new Promise((resolve, reject) => {
       const img = new Image();
       // 处理跨域问题，若图片同域可省略
       img.crossOrigin = "anonymous";
       img.onload = () => {
         const canvas = document.createElement('canvas');
         const ctx = canvas.getContext('2d');
         // 设置画布尺寸为人脸大小
         canvas.width = faceBox.width;
         canvas.height = faceBox.height;
         // 裁剪人脸区域：参数为(源图, 裁剪起始x, 裁剪起始y, 裁剪宽度, 裁剪高度, 画布x, 画布y, 画布宽度, 画布高度)
         ctx.drawImage(
           img,
           faceBox.leftCol,
           faceBox.topRow,
           faceBox.width,
           faceBox.height,
           0,
           0,
           faceBox.width,
           faceBox.height
         );
         // 转为base64格式，Clarifai支持直接传入
         const croppedFaceBase64 = canvas.toDataURL('image/jpeg');
         resolve(croppedFaceBase64);
       };
       img.onerror = reject;
       img.src = imageUrl;
     });
   }
   

   注意：faceBox需要是绝对像素坐标，如果你的calculateFaceLocation返回的是相对比例，要转成绝对坐标，比如：

   calculateFaceLocation(region) {
     const clarifaiFace = region.region_info.bounding_box;
     const image = document.getElementById('inputImage'); // 假设页面上的原图元素ID是inputImage
     const width = image.width;
     const height = image.height;
     return {
       leftCol: clarifaiFace.left_col * width,
       topRow: clarifaiFace.top_row * height,
       rightCol: width - (clarifaiFace.right_col * width),
       bottomRow: height - (clarifaiFace.bottom_row * height),
       width: (clarifaiFace.right_col - clarifaiFace.left_col) * width,
       height: (clarifaiFace.bottom_row - clarifaiFace.top_row) * height
     }
   }
   

3. 修改API调用逻辑
   把原来并行的API调用改成串行，拿到人脸坐标后逐个裁剪并调用人种分类API：

   this.setState({imageURL: this.state.input});
   
   // 先执行人脸检测
   app2.models
     .predict(
       {
         id: 'face-detection',
         name: 'face-detection',
         version: '6dc7e46bc9124c5c8824be4822abe105',
         type: 'visual-detector',
       }, this.state.input)
     .then(async (response) => {
       const regions = response.outputs[0].data.regions;
       const faceBoxes = regions.map(region => this.calculateFaceLocation(region));
       this.displayFaceBox(faceBoxes);
   
       // 逐个处理每个人脸
       for (const box of faceBoxes) {
         try {
           const croppedFace = await cropFace(this.state.input, box);
           // 调用人种分类API
           const ethnicResponse = await app1.models.predict(
             {
               id: 'ethnicity-demographics-recognition',
               name: 'appearance-multicultural',
               version: 'b2897edbda314615856039fb0c489796',
               type: 'visual-classifier',
             },
             croppedFace
           );
           console.log('单人脸人种分类结果:', ethnicResponse);
           // 这里可以把结果存到state或者做其他处理
         } catch (err) {
           console.log('裁剪或人种分类出错:', err);
         }
       }
     })
     .catch((err) => {
       console.log("Clarifai Error:", err);
     });
   

关键注意点 #

• 确保图片没有跨域问题，如果是外部图片，需要服务器配置CORS，同时设置img.crossOrigin = "anonymous"。
• Clarifai的predict方法支持传入base64字符串、Blob对象或者图片URL，用base64是最直接的方式。
• 用async/await处理异步逻辑，避免回调地狱，确保裁剪完成后再调用人种分类API。

内容的提问来源于stack exchange，提问作者Bao Nguyen