实时修改摄像头扫描QR码颜色技术求助：将黑色QR码改为黄色

Hey there! Since you already have QR code detection up and running with your CameraView, you’re already halfway to pulling off this color replacement trick. Let’s break down how to make it happen smoothly:

1. Grab the QR Code’s Bounding Coordinates #

First, double-check that your QR detection setup is capturing the bounding rectangle of each detected QR code. Most libraries (like Google’s ML Kit, which is common for this use case) return this coordinate data alongside the QR’s content. You’ll need these bounds to know exactly where to draw your yellow overlay later—just make sure to adjust them to match your CameraView’s display size (camera frame coordinates don’t always line up perfectly with on-screen pixels!).

2. Add a Transparent Overlay View (Simplest Approach) #

Instead of modifying raw camera frames (which can be slow and resource-heavy), the easiest way is to place a transparent custom View directly on top of your CameraView. This view will draw a yellow rectangle over the QR code every time it’s detected.

Here’s a quick example of the custom View (for Android):

class QrOverlayView(context: Context, attrs: AttributeSet?) : View(context, attrs) {
    private var qrBounds: Rect? = null
    private val yellowPaint = Paint().apply {
        color = Color.YELLOW
        style = Paint.Style.FILL
        alpha = 220 // Semi-transparent so you can still see underlying content if needed
    }

    fun updateQrPosition(newBounds: Rect?) {
        qrBounds = newBounds
        invalidate() // Trigger a redraw with the new position
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        qrBounds?.let { canvas.drawRect(it, yellowPaint) }
    }
}

Drop this view into your layout right over the CameraView:

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <your.package.CameraView
        android:id="@+id/cameraView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <your.package.QrOverlayView
        android:id="@+id/qrOverlay"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</FrameLayout>

3. Sync Detection with Overlay Updates #

Every time your QR detector finds a code, adjust its bounding coordinates to match the overlay’s size (account for aspect ratio and device rotation here!). Then call qrOverlay.updateQrPosition(adjustedRect) to refresh the yellow rectangle. If no QR code is detected, pass null to clear the overlay.

4. Handle Edge Cases #

• Rotation: Make sure to adjust the bounding rectangle when the device rotates—otherwise the yellow box will be misaligned.
• Performance: Keep coordinate adjustments lightweight; if you’re doing heavy calculations, offload them to a background thread to avoid lagging the camera preview.
• Multiple QR Codes: If you need to handle multiple codes at once, modify the overlay to draw multiple rectangles instead of just one.

Alternative: Modify Raw Camera Frames (For Advanced Use Cases) #

If you want to actually replace the QR code’s pixels in the camera feed (e.g., for recording or sharing the video), you can:

1. Convert the camera frame to a Bitmap.
2. Iterate over the pixels within the QR’s bounding box and change their color to yellow.
3. Draw the modified Bitmap back to the preview.
   Note: This is more resource-intensive, so optimize it by limiting the pixel area you modify or using GPU acceleration if possible.

内容的提问来源于stack exchange，提问作者Ronak Joshi