Question

我创建了一个频谱图，可以从用户的麦克风接收输入。到目前为止，我已经能够将其渲染为灰度（目标是RGB热图），但它的渲染效果却是颠倒的。显然，我的绘图功能有些麻烦。您可以在https://bloom510.art/spectrogram

上实时观看

提供了字节频率数据流，我的绘图函数迭代了画布宽度的当前1xheight像素切片，同时将数据值添加到画布的当前RGB值。

draw(x = 0) {
    const { ctx, canvas, props } = this;
    requestAnimationFrame(() => {
        if (x > canvas.width) x = 0;
        x += 1;
        this.draw(x);
    });
    /* start at the origin, get a 1px by canvas height slice of data */
    const slice = ctx.getImageData(0, 0, 1, canvas.height);
    let sliceData = slice.data;
    for (let i = 0; i < sliceData.length; i += 4) {
        if(props.data){
            /* Add magnitudes from getByteFrequencyData to the slice */
            sliceData[i] +=  props.data[i];   
            sliceData[i + 1] += props.data[i + 1]; 
            sliceData[i + 2] += props.data[i + 2]; 
        } else {
            sliceData[i] = 0;
            sliceData[i + 1] = 0;
            sliceData[i + 2] = 0;
        }
    }
    ctx.putImageData(slice, x, 0);
}

它表现得很好，但是如上所述，频率是倒置的！我目前正在使用CSS来翻转画布和缩放画布，以此来解决此问题。如果有人能弄清楚我的逻辑出了什么问题，并让我知道除了创建RGB热图之外，我还能解决此问题，我将不胜感激。

为什么我的频谱图会颠倒显示？

0 个答案: