乐趣区

关于后端:Android-CameraX结合LibYUV和GPUImage自定义相机滤镜

jiezi

作者：itfitness 链接：https://www.jianshu.com/p/f08…

本文目录：

前言

之前应用 Camera 实现了一个自定义相机滤镜（Android 自定义相机滤镜），然而运行起来有点卡顿，这次用 Camerax 来实现一样的成果发现很晦涩，在此记录一下，也心愿能帮到有须要的同学。

实现成果

实现步骤

1. 引入依赖库

这里我引入的依赖库有CameraX、GPUImage(滤镜库)、Utilcodex（一款好用的工具类）

// CameraX core library using camera2 implementation
    implementation "androidx.camera:camera-camera2:1.0.1"
// CameraX Lifecycle Library
    implementation "androidx.camera:camera-lifecycle:1.0.1"
// CameraX View class
    implementation "androidx.camera:camera-view:1.0.0-alpha27"

    implementation'jp.co.cyberagent.android.gpuimage:gpuimage-library:1.4.1'
    implementation 'com.blankj:utilcodex:1.30.6'
2. 引入 libyuv

这里我用的是这个案例（https://github.com/theeasiest…）外面的libyuv，如下

3. 编写 CameraX 预览代码

布局代码如下

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <androidx.camera.view.PreviewView
        android:id="@+id/viewFinder"
        android:layout_width="0dp"
        android:layout_height="0dp" />
</FrameLayout>

Activity 中开启相机预览代码如下，根本都是 Google 官网提供的案例代码

class MainActivity : AppCompatActivity() {
    private lateinit var cameraExecutor: ExecutorService
    override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        cameraExecutor = Executors.newSingleThreadExecutor()
        // Request camera permissions
        if (allPermissionsGranted()) {startCamera()
        } else {
            ActivityCompat.requestPermissions(this, REQUIRED_PERMISSIONS, REQUEST_CODE_PERMISSIONS)
        }
    }

    private fun allPermissionsGranted() = REQUIRED_PERMISSIONS.all {
        ContextCompat.checkSelfPermission(baseContext, it) == PackageManager.PERMISSION_GRANTED
    }

    override fun onRequestPermissionsResult(
        requestCode: Int, permissions: Array<String>, grantResults:
        IntArray) {super.onRequestPermissionsResult(requestCode, permissions, grantResults)
        if (requestCode == REQUEST_CODE_PERMISSIONS) {if (allPermissionsGranted()) {startCamera()
            } else {
                Toast.makeText(this,
                    "Permissions not granted by the user.",
                    Toast.LENGTH_SHORT).show()
                finish()}
        }
    }
    private fun startCamera() {val cameraProviderFuture = ProcessCameraProvider.getInstance(this)
        cameraProviderFuture.addListener(Runnable {val cameraProvider: ProcessCameraProvider = cameraProviderFuture.get()
            val preview = Preview.Builder()
                .build()
                .also {it.setSurfaceProvider(viewFinder.surfaceProvider)
                }
            val cameraSelector = CameraSelector.DEFAULT_BACK_CAMERA
            try {cameraProvider.unbindAll()
                cameraProvider.bindToLifecycle(this, cameraSelector, preview)
            } catch(exc: Exception) {Log.e(TAG, "Use case binding failed", exc)
            }
        }, ContextCompat.getMainExecutor(this))
    }

    override fun onDestroy() {super.onDestroy()
        cameraExecutor.shutdown()}

    companion object {
        private const val TAG = "CameraXBasic"
        private const val REQUEST_CODE_PERMISSIONS = 10
        private val REQUIRED_PERMISSIONS = arrayOf(Manifest.permission.CAMERA)

    }
}

到这里就能够实现相机预览了

4. 减少相机数据回调

咱们要减少滤镜成果就必须对相机的数据进行操作，这里咱们通过获取相机数据回调来获取可批改的数据

val imageAnalyzer = ImageAnalysis.Builder()
                // 设置回调数据的比例为 16:9
                .setTargetAspectRatio(AspectRatio.RATIO_16_9)
                .build()
                .also {it.setAnalyzer(cameraExecutor,this@MainActivity)
                }

这里咱们还须要进行绑定

除此之外咱们还须要在 Activity 中实现 ImageAnalysis.Analyzer 接口，数据的获取就在此接口的回调办法中获取，如下所示，其中 ImageProxy 就蕴含了图像数据

override fun analyze(image: ImageProxy) {}
5. 对回调数据进行解决

咱们在相机数据回调的办法中对图像进行解决并增加滤镜，当然在此之前咱们还须要创立 GPUImage 对象并设置滤镜类型

private var bitmap:Bitmap? = null
private var gpuImage:GPUImage? = null
// 创立 GPUImage 对象并设置滤镜类型，这里我应用的是素描滤镜
private fun initFilter() {gpuImage = GPUImage(this)
        gpuImage!!.setFilter(GPUImageSketchFilter())
    }
@SuppressLint("UnsafeOptInUsageError")
    override fun analyze(image: ImageProxy) {
        // 将 Android 的 YUV 数据转为 libYuv 的数据
        var yuvFrame = yuvUtils.convertToI420(image.image!!)
        // 对图像进行旋转（因为回调的相机数据是横着的因而须要旋转 90 度）yuvFrame = yuvUtils.rotate(yuvFrame, 90)
        // 依据图像大小创立 Bitmap
        bitmap = Bitmap.createBitmap(yuvFrame.width, yuvFrame.height, Bitmap.Config.ARGB_8888)
        // 将图像转为 Argb 格局的并填充到 Bitmap 上
        yuvUtils.yuv420ToArgb(yuvFrame,bitmap!!)
        // 利用 GpuImage 给图像增加滤镜
        bitmap = gpuImage!!.getBitmapWithFilterApplied(bitmap)
        // 因为这不是 UI 线程因而须要在 UI 线程更新 UI
        img.post {img.setImageBitmap(bitmap)
            // 敞开 ImageProxy，才会回调下一次的数据
            image.close()}

    }
6. 拍摄照片

这里咱们加一个拍照的按钮

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <androidx.camera.view.PreviewView
        android:id="@+id/viewFinder"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    <ImageView
        android:id="@+id/img"
        android:scaleType="centerCrop"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
    <Button
        android:id="@+id/bt_takepicture"
        android:layout_gravity="center_horizontal|bottom"
        android:layout_marginBottom="100dp"
        android:text="拍照"
        android:layout_width="70dp"
        android:layout_height="70dp"/>
</FrameLayout>

而后咱们在 Activity 中增加拍照的逻辑，其实就是将 Bitmap 转为图片保留到 SD 卡，这里咱们应用了之前引入的 Utilcodex 工具，当咱们点击按钮的时候isTakePhoto 会变为true，而后在相机的回调中就会进行保留图片的解决

bt_takepicture.setOnClickListener {isTakePhoto = true}

并且咱们退出变量管制，在拍照的时候不解决回调数据

@SuppressLint("UnsafeOptInUsageError")
    override fun analyze(image: ImageProxy) {if(!isTakePhoto){
            // 将 Android 的 YUV 数据转为 libYuv 的数据
            var yuvFrame = yuvUtils.convertToI420(image.image!!)
            // 对图像进行旋转（因为回调的相机数据是横着的因而须要旋转 90 度）yuvFrame = yuvUtils.rotate(yuvFrame, 90)
            // 依据图像大小创立 Bitmap
            bitmap = Bitmap.createBitmap(yuvFrame.width, yuvFrame.height, Bitmap.Config.ARGB_8888)
            // 将图像转为 Argb 格局的并填充到 Bitmap 上
            yuvUtils.yuv420ToArgb(yuvFrame,bitmap!!)
            // 利用 GpuImage 给图像增加滤镜
            bitmap = gpuImage!!.getBitmapWithFilterApplied(bitmap)
            // 因为这不是 UI 线程因而须要在 UI 线程更新 UI
            img.post {img.setImageBitmap(bitmap)
                if(isTakePhoto){takePhoto()
                }
                // 敞开 ImageProxy，才会回调下一次的数据
                image.close()}
        }else{image.close()
        }
    }
 /**
     * 拍照
     */
    private fun takePhoto() {
        Thread{val filePath = File(getExternalFilesDir(Environment.DIRECTORY_DOWNLOADS),"${System.currentTimeMillis()}save.png")
            ImageUtils.save(bitmap,filePath.absolutePath,Bitmap.CompressFormat.PNG)
            ToastUtils.showShort("拍摄胜利")
            isTakePhoto = false
        }.start()}

成果如下

保留的图片在如下目录

保留的图片如下


只有一直的学习提高，能力不被时代淘汰。关注我，每天分享常识干货！

退出移动版