如何优化MediaPipe Face Mesh处理图片时的加载慢及警告问题

一、图片加载缓慢优化措施 #

• 本地化托管图片：将当前使用的第三方远程图片下载后，托管到自己的静态资源服务器或CDN上，避免跨域请求延迟及第三方资源的不稳定问题。
• 图片格式与体积优化：
  • 将图片转换为WebP格式，在画质损失极小的前提下，文件体积可较JPG/PNG减少50%以上；
  • 根据实际使用场景压缩图片分辨率，无需保留原图尺寸时，缩小图片像素量能直接降低加载耗时。
• 修正图片加载逻辑：原代码中在图片未加载完成时就设置canvas宽高，此时image的width/height仍为0，属于无效操作，需将canvas尺寸设置移至image.onload回调内。
• 添加异常处理：补充图片加载失败的回调逻辑，避免加载异常时无提示。

二、WebGL警告日志处理 #

日志中的OpenGL error checking is disabled是MediaPipe默认开启调试日志导致的非功能性警告，不会影响功能运行，可通过初始化FaceMesh时配置日志等级关闭：
在FaceMesh的初始化参数中添加loglevel: 0（0代表静默模式，会关闭除严重错误外的所有日志）。

优化后的完整代码示例 #

// 先获取canvas元素
const canvasElement = document.getElementById('your-canvas-id');
const ctx = canvasElement.getContext('2d');

// 初始化FaceMesh并关闭冗余调试日志
const faceMesh = new FaceMesh({
  locateFile: (file) => {
    return `https://cdn.jsdelivr.net/npm/@mediapipe/face_mesh/${file}`;
  },
  loglevel: 0 // 添加日志等级配置
});

faceMesh.setOptions({
  maxNumFaces: 1,
  refineLandmarks: true,
  minDetectionConfidence: 0.5,
  minTrackingConfidence: 0.5
});

// 实现Face Mesh绘制逻辑
function onResults(results) {
  ctx.clearRect(0, 0, canvasElement.width, canvasElement.height);
  // 绘制原图
  ctx.drawImage(results.image, 0, 0, canvasElement.width, canvasElement.height);
  // 绘制关键点
  if (results.multiFaceLandmarks) {
    for (const landmarks of results.multiFaceLandmarks) {
      for (const landmark of landmarks) {
        ctx.beginPath();
        ctx.arc(landmark.x * canvasElement.width, landmark.y * canvasElement.height, 2, 0, 2 * Math.PI);
        ctx.fillStyle = 'red';
        ctx.fill();
      }
    }
  }
}

faceMesh.onResults(onResults);

async function render(image) {
  await faceMesh.send({
    image: image
  });
}

function main() {
  var image = new Image();
  image.crossOrigin = "anonymous";
  // 替换为自己托管的优化后图片地址
  image.src = "your-optimized-image-url";
  
  image.onload = function() {
    // 图片加载完成后再设置canvas尺寸
    canvasElement.width = image.width;
    canvasElement.height = image.height;
    render(image);
  };

  // 图片加载失败处理
  image.onerror = function() {
    console.error('图片加载失败，请检查地址');
  };
}

main();

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