視頻編輯的時候，為了顯示主體內容的突出，一般是在背景中加上模糊背景并且降暗度。類似這種效果

image.png

用opengl要怎樣去實現呢，那么需要這幾步去分解
1、根據視頻的顯示比例，如果1:1,4:3,16:9,3:4,9:16這樣的比例去計算背景顯示大小，圖片顯示大小。
比如顯示1:1的視頻，如果圖片是9:16的，那么根據背景大小，讓圖片進行居中顯示：

無標題.png

具體代碼如下：

   public void adjustImageScaling(int width, int height) {
        float outputWidth = width;
        float outputHeight = height;
        if (mBitmap != null) {
            int framewidth = mBitmap.getWidth();
            int frameheight = mBitmap.getHeight();
            int rotation = (matrixAngle + bitmapAngle) % 360;
            if ((rotation == 90 || rotation == 270)) {
                framewidth = mBitmap.getHeight();
                frameheight = mBitmap.getWidth();
            }
            float ratio1 = outputWidth / framewidth;
            float ratio2 = outputHeight / frameheight;
            float ratioMax = Math.min(ratio1, ratio2);
            // 居中后圖片顯示的大小
            int imageWidthNew = Math.round(framewidth * ratioMax);
            int imageHeightNew = Math.round(frameheight * ratioMax);
            Log.i(TAG, "outputWidth:" + outputWidth + ",outputHeight:" + outputHeight + ",imageWidthNew:" + imageWidthNew + ",imageHeightNew:" + imageHeightNew);
            // 圖片被拉伸的比例,以及顯示比例時的偏移量
            float ratioWidth = outputWidth / imageWidthNew;
            float ratioHeight = outputHeight / imageHeightNew;
            Log.i(TAG, "isDoRotate:" + isDoRotate + ",ratioWidth:" + ratioWidth + ",ratioHeight:" + ratioHeight);
            // 根據拉伸比例還原頂點
            cube = new float[]{
                    pos[0] / ratioWidth, pos[1] / ratioHeight,
                    pos[2] / ratioWidth, pos[3] / ratioHeight,
                    pos[4] / ratioWidth, pos[5] / ratioHeight,
                    pos[6] / ratioWidth, pos[7] / ratioHeight,
            };
            mVerBuffer.clear();
            mVerBuffer.put(cube).position(0);
        }
    }

2、對圖片、視頻幀進行模糊、暗化操作
模糊算法用的是高斯模糊，只是說自己遍歷操作在java跑，用cpu跑邏輯，計算完之后再用gpu進行渲染，比起直接用opengl中遍歷，就相對快了一點。然后背景的頂點位置是填充整個顯示比例的，模糊的算法借鑒如下：
我只是在里面重新添加了暗度降低的算法：

https://github.com/Martin20150405/In77Camera/blob/e0b2ab455985db43e850244d5c789ce4ebcb49c3/In77Camera/omoshiroilib/src/main/java/com/martin/ads/omoshiroilib/filter/imgproc/CustomizedGaussianBlurFilter.java

    const vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
    vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
    return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
}

vec3 rgb2hsv(vec3 c) {
    const vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0);
    vec4 p = mix(vec4(c.bg, K.wz), vec4(c.gb, K.xy), step(c.b, c.g));
    vec4 q = mix(vec4(p.xyw, c.r), vec4(c.r, p.yzx), step(p.x, c.r));

    float d = q.x - min(q.w, q.y);
    return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + 0.001)), d / (q.x + 0.001), q.x);
}

  vec3 a = rgb2hsv(color);
    vec3 m = a-vec3(0.0f, 0.0f, 0.04f);
    gl_FragColor = vec4(hsv2rgb(m), orAlpha);

3、顯示原始的圖片和幀，按照第一步計算的頂點繪畫該圖片
整體調用如下：
//黑色背景

        GLES20.glViewport(0, 0, ConstantMediaSize.currentScreenWidth, ConstantMediaSize.currentScreenHeight);
        GLES20.glClearColor(0, 0, 0, 1.0f);
        GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT);
        //顯示區背景
        GLES20.glViewport(0, 0, ConstantMediaSize.showViewWidth, ConstantMediaSize.showViewHeight);
        if (currentMediaItem == null) {
            return;
        }
        int cornor = currentMediaItem.getRotation();
        imageBackgroundFilter.setmBitmap(currentMediaItem.getFirstFrame(), cornor);
        imageBackgroundFilter.initTexture();

        imageBackgroundFilter.onSizeChanged(mWidth, mHeight);
        imageBackgroundFilter.drawBackgrondPrepare();
        EasyGlUtils.bindFrameTexture(fFrame[0], fTexture[0]);
        imageBackgroundFilter.drawBackground();
       EasyGlUtils.unBindFrameBuffer();```