如何在android中结合覆盖位图和捕获的图像?

Posted

技术标签:

【中文标题】如何在android中结合覆盖位图和捕获的图像?【英文标题】:How to combine overlay bitmap and captured image in android? 【发布时间】:2016-01-25 22:11:28 【问题描述】:

我要求我需要创建一个自定义相机并允许用户在捕获图像时放置徽标。徽标可以放大/缩小并在任何地方的相机视图上移动。我已经编写了以下代码来执行此操作,我能够成功放大/缩小并移动徽标图像,但是当我将徽标和从相机拍摄的图片结合起来时,它没有正确结合。徽标图像放置在不同的位置,并且尺寸减小了。请有人帮我解决这个问题,因为我被困在这里并且无法找到问题所在。我还附上了手机截取的截图以供参考。请检查一下。

在点击捕获按钮之前,我已将徽标移至左下角

点击捕获按钮后,两个图像像这样组合在一起。

public class CustomCamera extends Activity implements OnTouchListener,
    SurfaceHolder.Callback 

private Matrix matrix = new Matrix();
private Matrix savedMatrix = new Matrix();
private static final int NONE = 0;
private static final int DRAG = 1;
private static final int ZOOM = 2;
private int mode = NONE;
private PointF start = new PointF();
private PointF mid = new PointF();
private float oldDist = 1f;
private float d = 0f;
private float newRot = 0f;
private float[] lastEvent = null;
String logoImageId = "";
Bitmap bitmap = null;
private Camera camera = null;
private SurfaceView cameraSurfaceView = null;
private SurfaceHolder cameraSurfaceHolder = null;
private boolean previewing = false;
RelativeLayout relativeLayout;
int currentCameraId = 0;
private Button btnCapture = null;
ImageButton useOtherCamera = null;
ImageView logoImageView;

@Override
public void onCreate(Bundle savedInstanceState) 
    super.onCreate(savedInstanceState);
    getWindow().setFormat(PixelFormat.TRANSLUCENT);
    requestWindowFeature(Window.FEATURE_NO_TITLE);
    getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
            WindowManager.LayoutParams.FLAG_FULLSCREEN);

    setContentView(R.layout.camera_layout);
    logoImageView = (ImageView) findViewById(R.id.logoImageView);
    Bundle extras = getIntent().getExtras();
    if (extras != null) 
        logoImageId = extras.getString("logoImageId ");
    
    try 
        File file = new File(Environment.getExternalStorageDirectory()
                + "/" + getPackageName() + "/logo/" + logoImageId 
                + ".jpg");
        bitmap = BitmapFactory.decodeFile(file.getAbsolutePath());
     catch (Exception e) 
        // TODO Auto-generated catch block
        e.printStackTrace();
    
    logoImageView.setImageBitmap(bitmap);
    logoImageView.setOnTouchListener(this);
    relativeLayout = (RelativeLayout) findViewById(R.id.containerImg);
    relativeLayout.setDrawingCacheEnabled(true);
    cameraSurfaceView = (SurfaceView) findViewById(R.id.surfaceView);
    cameraSurfaceHolder = cameraSurfaceView.getHolder();
    cameraSurfaceHolder.addCallback(this);
    btnCapture = (Button) findViewById(R.id.button);
    btnCapture.setOnClickListener(new OnClickListener() 
        @Override
        public void onClick(View v) 
            // TODO Auto-generated method stub
            camera.takePicture(null, null, cameraPictureCallbackJpeg);
        
    );



public boolean onTouch(View v, MotionEvent event) 
    // handle touch events here
    ImageView view = (ImageView) v;
    switch (event.getAction() & MotionEvent.ACTION_MASK) 
    case MotionEvent.ACTION_DOWN:
        savedMatrix.set(matrix);
        start.set(event.getX(), event.getY());
        mode = DRAG;
        lastEvent = null;
        break;
    case MotionEvent.ACTION_POINTER_DOWN:
        oldDist = spacing(event);
        if (oldDist > 10f) 
            savedMatrix.set(matrix);
            midPoint(mid, event);
            mode = ZOOM;
        
        lastEvent = new float[4];
        lastEvent[0] = event.getX(0);
        lastEvent[1] = event.getX(1);
        lastEvent[2] = event.getY(0);
        lastEvent[3] = event.getY(1);
        d = rotation(event);
        break;
    case MotionEvent.ACTION_UP:
    case MotionEvent.ACTION_POINTER_UP:
        mode = NONE;
        lastEvent = null;
        break;
    case MotionEvent.ACTION_MOVE:
        if (mode == DRAG) 
            matrix.set(savedMatrix);
            float dx = event.getX() - start.x;
            float dy = event.getY() - start.y;
            matrix.postTranslate(dx, dy);
         else if (mode == ZOOM) 
            float newDist = spacing(event);
            if (newDist > 10f) 
                matrix.set(savedMatrix);
                float scale = (newDist / oldDist);
                matrix.postScale(scale, scale, mid.x, mid.y);
            
            if (lastEvent != null && event.getPointerCount() == 3) 
                newRot = rotation(event);
                float r = newRot - d;
                float[] values = new float[9];
                matrix.getValues(values);
                float tx = values[2];
                float ty = values[5];
                float sx = values[0];
                float xc = (view.getWidth() / 2) * sx;
                float yc = (view.getHeight() / 2) * sx;
                matrix.postRotate(r, tx + xc, ty + yc);
            
        
        break;
    

    view.setImageMatrix(matrix);

    return true;


/**
 * Determine the space between the first two fingers
 */
private float spacing(MotionEvent event) 
    float x = event.getX(0) - event.getX(1);
    float y = event.getY(0) - event.getY(1);
    return FloatMath.sqrt(x * x + y * y);


/**
 * Calculate the mid point of the first two fingers
 */
private void midPoint(PointF point, MotionEvent event) 
    float x = event.getX(0) + event.getX(1);
    float y = event.getY(0) + event.getY(1);
    point.set(x / 2, y / 2);


/**
 * Calculate the degree to be rotated by.
 * 
 * @param event
 * @return Degrees
 */
private float rotation(MotionEvent event) 
    double delta_x = (event.getX(0) - event.getX(1));
    double delta_y = (event.getY(0) - event.getY(1));
    double radians = Math.atan2(delta_y, delta_x);
    return (float) Math.toDegrees(radians);


PictureCallback cameraPictureCallbackJpeg = new PictureCallback() 
    @Override
    public void onPictureTaken(byte[] data, Camera camera) 
        // TODO Auto-generated method stub
        Bitmap cameraBitmap = BitmapFactory.decodeByteArray(data, 0,
                data.length);

        int wid = cameraBitmap.getWidth();
        int hgt = cameraBitmap.getHeight();

        Bitmap newBitmap = Bitmap.createBitmap(wid, hgt,
                Bitmap.Config.ARGB_8888);

        Canvas canvas = new Canvas(newBitmap);
        canvas.drawBitmap(cameraBitmap, 0f, 0f, null);
        canvas.drawBitmap(bitmap, matrix, null);

        File storagePath = new File(
                Environment.getExternalStorageDirectory() + "/PhotoAR/");
        storagePath.mkdirs();

        File myImage = new File(storagePath, Long.toString(System
                .currentTimeMillis()) + ".jpg");

        try 
            FileOutputStream out = new FileOutputStream(myImage);
            newBitmap.compress(Bitmap.CompressFormat.JPEG, 80, out);

            out.flush();
            out.close();
         catch (FileNotFoundException e) 
            Log.d("In Saving File", e + "");
         catch (IOException e) 
            Log.d("In Saving File", e + "");
        

    
;

@Override
public void surfaceChanged(SurfaceHolder holder, int format, int width,
        int height) 
    // TODO Auto-generated method stub

    if (previewing) 
        camera.stopPreview();
        previewing = false;
    
    try 

        if (this.getResources().getConfiguration().orientation != Configuration.ORIENTATION_LANDSCAPE) 
            camera.setDisplayOrientation(90);
        

        camera.setPreviewDisplay(cameraSurfaceHolder);
        camera.startPreview();
        previewing = true;
     catch (IOException e) 
        // TODO Auto-generated catch block
        e.printStackTrace();
    


@Override
public void surfaceCreated(SurfaceHolder holder) 
    // TODO Auto-generated method stub
    try 
        camera = Camera.open();
     catch (RuntimeException e) 
        Toast.makeText(
                getApplicationContext(),
                "Device camera  is not working properly, please try after sometime.",
                Toast.LENGTH_LONG).show();
    


@Override
public void surfaceDestroyed(SurfaceHolder holder) 
    // TODO Auto-generated method stub
    camera.stopPreview();
    camera.release();
    camera = null;
    previewing = false;



这是我的xml

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_
android:layout_ >

<RelativeLayout
    android:id="@+id/containerImg"
    android:layout_
    android:layout_ >

    <SurfaceView
        android:id="@+id/surfaceView"
        android:layout_
        android:layout_
        android:layout_centerInParent="true" />

    <ImageView
        android:id="@+id/logoImageView"
        android:layout_
        android:layout_
        android:contentDescription="@string/app_name"
        android:scaleType="matrix" />
</RelativeLayout>

<Button
    android:id="@+id/button"
    android:layout_
    android:layout_
    android:layout_gravity="right|center_vertical"
    android:background="@drawable/camera" />

提前致谢。

【问题讨论】:

您的问题隐藏在onPictureTaken() 方法中。它完全忽略了预览屏幕的缩放和平移设置。还要考虑到图片尺寸通常比预览框尺寸大得多,因此您应该缩放徽标以适合图片尺寸。 【参考方案1】:

好的,有几件事需要解决

    将表面视图的正确尺寸设置为您用于相机的尺寸 根据屏幕方向旋转捕获的位图 您的代码将出现内存不足错误,因为您正在将其加载到内存中并且不回收(这个我不会修复,如果您使用 google 将找到答案 :) 提示:搜索 injustdecodebounds 并回收位图)

我知道你想看看工作代码,所以你去吧:

    public class CameraActivity extends FragmentActivity implements OnTouchListener,
        SurfaceHolder.Callback 

    private Matrix matrix = new Matrix();
    private Matrix savedMatrix = new Matrix();
    private static final int NONE = 0;
    private static final int DRAG = 1;
    private static final int ZOOM = 2;
    private int mode = NONE;
    private PointF start = new PointF();
    private PointF mid = new PointF();
    private float oldDist = 1f;
    private float d = 0f;
    private float newRot = 0f;
    private float[] lastEvent = null;
    String logoImageId = "";
    Bitmap bitmap = null;
    private Camera camera = null;
    private SurfaceView cameraSurfaceView = null;
    private SurfaceHolder cameraSurfaceHolder = null;
    private boolean previewing = false;
    RelativeLayout relativeLayout;
    int currentCameraId = 0;
    private Button btnCapture = null;
    ImageButton useOtherCamera = null;
    ImageView logoImageView;

    @Override
    protected void onCreate(Bundle savedInstanceState) 
        super.onCreate(savedInstanceState);


        getWindow().setFormat(PixelFormat.TRANSLUCENT);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
                WindowManager.LayoutParams.FLAG_FULLSCREEN);

        setContentView(R.layout.activity_camera);
        logoImageView = (ImageView) findViewById(R.id.logoImageView);
        Bundle extras = getIntent().getExtras();
        if (extras != null) 
            logoImageId = extras.getString("logoImageId ");
        
        try 
            /*File file = new File(Environment.getExternalStorageDirectory()
                    + "/" + getPackageName() + "/logo/" + logoImageId
                    + ".jpg");
            bitmap = BitmapFactory.decodeFile(file.getAbsolutePath());*/
            bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.ic_launcher);
            logoImageView.setImageBitmap(bitmap);
         catch (Exception e) 
            // TODO Auto-generated catch block
            e.printStackTrace();
        

        logoImageView.setOnTouchListener(this);
        relativeLayout = (RelativeLayout) findViewById(R.id.containerImg);
        relativeLayout.setDrawingCacheEnabled(true);
        cameraSurfaceView = (SurfaceView) findViewById(R.id.surfaceView);
        cameraSurfaceHolder = cameraSurfaceView.getHolder();
        cameraSurfaceHolder.addCallback(this);
        btnCapture = (Button) findViewById(R.id.button);
        btnCapture.setOnClickListener(new OnClickListener() 
            @Override
            public void onClick(View v) 
                // TODO Auto-generated method stub
                camera.takePicture(null, null, cameraPictureCallbackJpeg);
            
        );

    

    public boolean onTouch(View v, MotionEvent event) 
        // handle touch events here
        ImageView view = (ImageView) v;
        switch (event.getAction() & MotionEvent.ACTION_MASK) 
            case MotionEvent.ACTION_DOWN:
                savedMatrix.set(matrix);
                start.set(event.getX(), event.getY());
                mode = DRAG;
                lastEvent = null;
                break;
            case MotionEvent.ACTION_POINTER_DOWN:
                oldDist = spacing(event);
                if (oldDist > 10f) 
                    savedMatrix.set(matrix);
                    midPoint(mid, event);
                    mode = ZOOM;
                
                lastEvent = new float[4];
                lastEvent[0] = event.getX(0);
                lastEvent[1] = event.getX(1);
                lastEvent[2] = event.getY(0);
                lastEvent[3] = event.getY(1);
                d = rotation(event);
                break;
            case MotionEvent.ACTION_UP:
            case MotionEvent.ACTION_POINTER_UP:
                mode = NONE;
                lastEvent = null;
                break;
            case MotionEvent.ACTION_MOVE:
                if (mode == DRAG) 
                    matrix.set(savedMatrix);
                    float dx = event.getX() - start.x;
                    float dy = event.getY() - start.y;
                    matrix.postTranslate(dx, dy);
                 else if (mode == ZOOM) 
                    float newDist = spacing(event);
                    if (newDist > 10f) 
                        matrix.set(savedMatrix);
                        float scale = (newDist / oldDist);
                        matrix.postScale(scale, scale, mid.x, mid.y);
                    
                    if (lastEvent != null && event.getPointerCount() == 3) 
                        newRot = rotation(event);
                        float r = newRot - d;
                        float[] values = new float[9];
                        matrix.getValues(values);
                        float tx = values[2];
                        float ty = values[5];
                        float sx = values[0];
                        float xc = (view.getWidth() / 2) * sx;
                        float yc = (view.getHeight() / 2) * sx;
                        matrix.postRotate(r, tx + xc, ty + yc);
                    
                
                break;
        

        view.setImageMatrix(matrix);

        return true;
    

    /**
     * Determine the space between the first two fingers
     */
    private float spacing(MotionEvent event) 
        float x = event.getX(0) - event.getX(1);
        float y = event.getY(0) - event.getY(1);
        return FloatMath.sqrt(x * x + y * y);
    

    /**
     * Calculate the mid point of the first two fingers
     */
    private void midPoint(PointF point, MotionEvent event) 
        float x = event.getX(0) + event.getX(1);
        float y = event.getY(0) + event.getY(1);
        point.set(x / 2, y / 2);
    

    /**
     * Calculate the degree to be rotated by.
     *
     * @param event
     * @return Degrees
     */
    private float rotation(MotionEvent event) 
        double delta_x = (event.getX(0) - event.getX(1));
        double delta_y = (event.getY(0) - event.getY(1));
        double radians = Math.atan2(delta_y, delta_x);
        return (float) Math.toDegrees(radians);
    

    Camera.PictureCallback cameraPictureCallbackJpeg = new Camera.PictureCallback() 
        @Override
        public void onPictureTaken(byte[] data, Camera camera) 
            // TODO Auto-generated method stub
            BitmapFactory.Options options = new BitmapFactory.Options();
            //o.inJustDecodeBounds = true;
            Bitmap cameraBitmapNull = BitmapFactory.decodeByteArray(data, 0,
                    data.length, options);

            int wid = options.outWidth;
            int hgt = options.outHeight;
            Matrix nm = new Matrix();

            Camera.Size cameraSize = camera.getParameters().getPictureSize();
            float ratio = relativeLayout.getHeight()*1f/cameraSize.height;
            if (getResources().getConfiguration().orientation != Configuration.ORIENTATION_LANDSCAPE) 
                nm.postRotate(90);
                nm.postTranslate(hgt, 0);
                wid = options.outHeight;
                hgt = options.outWidth;
                ratio = relativeLayout.getWidth()*1f/cameraSize.height;

            else 
                wid = options.outWidth;
                hgt = options.outHeight;
                ratio = relativeLayout.getHeight()*1f/cameraSize.height;
            

            float[] f = new float[9];
            matrix.getValues(f);

            f[0] = f[0]/ratio;
            f[4] = f[4]/ratio;
            f[5] = f[5]/ratio;
            f[2] = f[2]/ratio;
            matrix.setValues(f);

            Bitmap newBitmap = Bitmap.createBitmap(wid, hgt,
                    Bitmap.Config.ARGB_8888);

            Canvas canvas = new Canvas(newBitmap);
            Bitmap cameraBitmap = BitmapFactory.decodeByteArray(data, 0,
                    data.length, options);

            canvas.drawBitmap(cameraBitmap, nm, null);
            cameraBitmap.recycle();

            canvas.drawBitmap(bitmap, matrix, null);
            bitmap.recycle();

            File storagePath = new File(
                    Environment.getExternalStorageDirectory() + "/PhotoAR/");
            storagePath.mkdirs();

            File myImage = new File(storagePath, Long.toString(System
                    .currentTimeMillis()) + ".jpg");

            try 
                FileOutputStream out = new FileOutputStream(myImage);
                newBitmap.compress(Bitmap.CompressFormat.JPEG, 80, out);

                out.flush();
                out.close();
             catch (FileNotFoundException e) 
                Log.d("In Saving File", e + "");
             catch (IOException e) 
                Log.d("In Saving File", e + "");
            

        
    ;

    @Override
    public void surfaceChanged(SurfaceHolder holder, int format, int width,
                               int height) 
        // TODO Auto-generated method stub

        if (previewing) 
            camera.stopPreview();
            previewing = false;
        
        try 

            if (this.getResources().getConfiguration().orientation != Configuration.ORIENTATION_LANDSCAPE) 
                camera.setDisplayOrientation(90);
                Camera.Size cameraSize = camera.getParameters().getPictureSize();
                int wr = relativeLayout.getWidth();
                int hr = relativeLayout.getHeight();
                float ratio = relativeLayout.getWidth()*1f/cameraSize.height;
                float w = cameraSize.width*ratio;
                float h = cameraSize.height*ratio;
                RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams((int)h, (int)w);
                cameraSurfaceView.setLayoutParams(lp);
            else 
                camera.setDisplayOrientation(0);
                Camera.Size cameraSize = camera.getParameters().getPictureSize();
                float ratio = relativeLayout.getHeight()*1f/cameraSize.height;
                float w = cameraSize.width*ratio;
                float h = cameraSize.height*ratio;
                RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams((int)w, (int)h);
                cameraSurfaceView.setLayoutParams(lp);
            

            camera.setPreviewDisplay(cameraSurfaceHolder);
            camera.startPreview();
            previewing = true;
         catch (IOException e) 
            // TODO Auto-generated catch block
            e.printStackTrace();
        
    

    @Override
    public void surfaceCreated(SurfaceHolder holder) 
        // TODO Auto-generated method stub
        try 
            camera = Camera.open();
            Camera.Parameters params = camera.getParameters();

            // Check what resolutions are supported by your camera
            List<Camera.Size> sizes = params.getSupportedPictureSizes();

            // setting small image size in order to avoid OOM error
            Camera.Size cameraSize = null;
            for (Camera.Size size : sizes) 
                //set whatever size you need
                //if(size.height<500) 
                    cameraSize = size;
                    break;
                //
            

            if (cameraSize != null) 
                params.setPictureSize(cameraSize.width, cameraSize.height);
                camera.setParameters(params);

                float ratio = relativeLayout.getHeight()*1f/cameraSize.height;
                float w = cameraSize.width*ratio;
                float h = cameraSize.height*ratio;
                RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams((int)w, (int)h);
                cameraSurfaceView.setLayoutParams(lp);
            
         catch (RuntimeException e) 
            Toast.makeText(
                    getApplicationContext(),
                    "Device camera  is not working properly, please try after sometime.",
                    Toast.LENGTH_LONG).show();
        
    

    @Override
    public void surfaceDestroyed(SurfaceHolder holder) 
        // TODO Auto-generated method stub
        camera.stopPreview();
        camera.release();
        camera = null;
        previewing = false;
    

请注意,为了避免 OOM 错误,我采用了较小的相机分辨率

【讨论】:

嗨@Vilen,谢谢你,我试过你的代码,它在小相机分辨率(高度 500)下运行良好。但是当我将其更改为 1080 时,又是同样的问题(我在问题中提到过),徽标图像被放置在不同的位置。还有什么我错过的吗?再次感谢,因为我正忙于其他功能,您直接提供代码确实帮助了我。 @ramesh6233 好收获!我更新了代码,所以现在它应该适用于所有相机尺寸。显然问题仍然是相同的surfaceView,camer和transform matrix分歧【参考方案2】:

相机预览和最终拍摄的照片通常使用不同的分辨率和宽高比;因此,在后期处理中应用叠加层时需要考虑这一点。

更准确地说,您需要在“应用叠加”过程中考虑以下因素:

相机预览分辨率 表面预览尺寸(因为用户在放置叠加层时会考虑到他所看到的内容) 最终图片分辨率

【讨论】:

【参考方案3】:

您可以将捕获的图像加载为位图并在位图上绘制叠加徽标,而不是将 Ovelay 放在相机上。保存位图。

下面的代码将结合两个位图图像,即您捕获的图像和您的徽标。

public Bitmap combineImages(Bitmap frame, Bitmap image) 
        Bitmap cs = null;
        Bitmap rs = null;

        rs = Bitmap.createScaledBitmap(frame, image.getWidth() + 50,
                image.getHeight() + 50, true);

        cs = Bitmap.createBitmap(rs.getWidth(), rs.getHeight(),
                Bitmap.Config.RGB_565);

        Canvas comboImage = new Canvas(cs);

        comboImage.drawBitmap(image, 25, 25, null);
        comboImage.drawBitmap(rs, 0, 0, null);
        if (rs != null) 
            rs.recycle();
            rs = null;
        
        Runtime.getRuntime().gc();
        return cs;
    

希望这能给你一些想法。

一些可以帮助你的链接。

1) Merge two bitmaps in android

2) Merging image from camera with image from drawables

3)how to merge to two bitmap one over another

【讨论】:

以上是关于如何在android中结合覆盖位图和捕获的图像?的主要内容,如果未能解决你的问题,请参考以下文章

MLKit Firebase android - 如何将 FirebaseVisionFace 转换为图像对象(如位图)?

如何从视频中捕获位图图像

Android 捕获和显示图像应用程序

如何从相机捕获多张图像并使用位图将其编码为字符串?

Android 位图平移/缩放/裁剪

如何在android中更改位图图像颜色?