Фильтры изображений и видео, такие как Snapchat в Android

Здесь я делаю наложение двух растровых изображений друг на друга. Степень видимости любого из растровых изображений определяется касанием пользователя. У меня есть перечисление, в котором пользователь прокручивает в основном ВЛЕВО ИЛИ ВПРАВО и НЕТ. В зависимости от того, в каком направлении пользователь прокручивает, к текущему растровому изображению применяется разное растровое изображение.

@Override
public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
    if (mCurrentScrollDirection.ordinal() == ScrollDirection.NONE.ordinal()) {
        if (distanceX > 0) {
            mCurrentScrollDirection = ScrollDirection.LEFT;
        } else {
            mCurrentScrollDirection = ScrollDirection.RIGHT;
        }
    }
    mTouchX = (int) e2.getX();
    overlayBitmaps(mTouchX);
    return false;
}

private void overlayBitmaps(int coordinateX) {

    switch (mCurrentScrollDirection) {
        case NONE: {
            //do nothing here
            break;
        }
        case LEFT: {
            overlayNextBitmap(coordinateX);
            break;
        }
        case RIGHT: {
            overlayPreviousBitmap(coordinateX);
            break;
        }
    }
}

private void overlayPreviousBitmap(int coordinateX) {
    mImageCanvas.save();

    Bitmap OSBitmap = Bitmap.createBitmap(mCurrentBitmap, coordinateX, 0, mCurrentBitmap.getWidth() - coordinateX, mCurrentBitmap.getHeight());
    mImageCanvas.drawBitmap(OSBitmap, coordinateX, 0, null);

    Bitmap FSBitmap = Bitmap.createBitmap(mPreviousBitmap, 0, 0, coordinateX, mCurrentBitmap.getHeight());
    mImageCanvas.drawBitmap(FSBitmap, 0, 0, null);

    mImageCanvas.restore();

    mCapturedImageView.setImageDrawable(new BitmapDrawable(getResources(), mResultBitmap));
}

private void overlayNextBitmap(int coordinateX) {
    mImageCanvas.save();

    Bitmap OSBitmap = Bitmap.createBitmap(mCurrentBitmap, 0, 0, coordinateX, mCurrentBitmap.getHeight());
    mImageCanvas.drawBitmap(OSBitmap, 0, 0, null);

    Bitmap FSBitmap = Bitmap.createBitmap(mNextBitmap, coordinateX, 0, mCurrentBitmap.getWidth() - coordinateX, mCurrentBitmap.getHeight());
    mImageCanvas.drawBitmap(FSBitmap, coordinateX, 0, null);

    mImageCanvas.restore();

    mCapturedImageView.setImageDrawable(new BitmapDrawable(getResources(), mResultBitmap));
}

Это работает довольно хорошо, я просто не тестировал устройства с малым объемом памяти, учитывая, что я не смог найти много :)

Полную справку по коду см. в эта ссылка. Это моя собственная библиотека, в которой вы можете захватывать изображения, применять фильтры и получать обратный вызов вызывающей активности. Это все еще продолжается.

Альтернативное решение:

Визуализируйте изображение на SurfaceTexture. Используйте эту SurfaceTexture в качестве ввода текстуры OpenGL "GL_OES_EGL_image_external" в фрагментный шейдер OpenGL. Нарисуйте полноэкранный четырехугольник с помощью этого фрагментного шейдера на вторичной текстуре поверхности. Визуализируйте вторичную SurfaceTexture в TextureView.

Заставить эту первую часть работать — сложная часть. Как только вы это заработаете, вы сможете применять разные шейдеры к изображениям, но не переключаться между ними, как показано на рисунке. Чтобы добавить плавное переключение между изображениями, визуализируйте два разных фрагментных шейдера на вторичной SurfaceTexture, используя GL_SCISSOR, чтобы разделить экран пополам в зависимости от значения смещения.

Основное преимущество этого метода заключается в том, что он будет использовать значительно меньше памяти. Растровое изображение может быть загружено один раз, и после однократного рендеринга на SurfaceTexture может быть отброшено.

Вторичным преимуществом этого метода является то, что можно применять более сложные фильтры, и что, немного поработав, вы также сможете рендерить видео.

Если вам интересно увидеть реализацию этой техники (включая фильтрацию видео), ознакомьтесь с Библиотека Kfilter для фильтрации/обработки фото и видео.