当前位置：首页 > uni-app

uniapp yuv

2026-03-04 20:26:32uni-app

uniapp 中处理 YUV 数据的方法

在 uniapp 中处理 YUV 数据通常涉及视频编解码、图像渲染或实时流处理场景。YUV 是一种颜色编码格式，常用于视频传输和存储。以下是在 uniapp 中处理 YUV 数据的几种常见方法：

使用 WebGL 渲染 YUV 数据

通过 uniapp 的 WebGL 接口可以直接渲染 YUV 数据。需要编写着色器将 YUV 转换为 RGB 格式：

// 顶点着色器
const vertexShaderSource = `
  attribute vec2 a_position;
  varying vec2 v_texCoord;
  void main() {
    gl_Position = vec4(a_position, 0, 1);
    v_texCoord = a_position * 0.5 + 0.5;
  }
`;

// 片段着色器
const fragmentShaderSource = `
  precision mediump float;
  varying vec2 v_texCoord;
  uniform sampler2D yTexture;
  uniform sampler2D uTexture;
  uniform sampler2D vTexture;
  void main() {
    float y = texture2D(yTexture, v_texCoord).r;
    float u = texture2D(uTexture, v_texCoord).r - 0.5;
    float v = texture2D(vTexture, v_texCoord).r - 0.5;

    float r = y + 1.402 * v;
    float g = y - 0.344 * u - 0.714 * v;
    float b = y + 1.772 * u;

    gl_FragColor = vec4(r, g, b, 1.0);
  }
`;

利用 Canvas 绘制 YUV 图像

uniapp yuv

通过 uniapp 的 canvas 组件可以绘制 YUV 转换后的图像：

const canvas = uni.createCanvasContext('myCanvas');
const imageData = canvas.createImageData(width, height);
// 填充 YUV 转换后的 RGB 数据到 imageData.data
canvas.putImageData(imageData, 0, 0);
canvas.draw();

使用第三方插件处理 YUV

uniapp 支持引入第三方 JavaScript 库处理 YUV 数据：

uniapp yuv

import YUVCanvas from 'yuv-canvas';
const canvas = document.getElementById('canvas');
const yuvCanvas = YUVCanvas.attach(canvas);
yuvCanvas.drawFrame({
  width: 1280,
  height: 720,
  y: yData, // Uint8Array 类型的 Y 分量
  u: uData, // Uint8Array 类型的 U 分量
  v: vData  // Uint8Array 类型的 V 分量
});

通过原生插件处理 YUV

对于高性能要求的场景，可以开发原生插件处理 YUV 数据：

// Android 原生代码示例
public class YUVProcessor {
    public static Bitmap yuvToBitmap(byte[] yuvData, int width, int height) {
        YuvImage yuvImage = new YuvImage(yuvData, ImageFormat.NV21, width, height, null);
        ByteArrayOutputStream os = new ByteArrayOutputStream();
        yuvImage.compressToJpeg(new Rect(0, 0, width, height), 100, os);
        byte[] jpegData = os.toByteArray();
        return BitmapFactory.decodeByteArray(jpegData, 0, jpegData.length);
    }
}

注意事项

YUV 有多种格式（如 I420、NV12、NV21），处理前需确认具体格式。跨平台开发时需考虑各端差异，iOS 和 Android 可能有不同的原生实现方式。性能敏感场景建议使用 WebGL 或原生插件方案。