Android 图片合成：添加蒙板效果 不规则相框 透明度渐变效果的实现

 

Android 图片合成：添加蒙板效果 不规则相框 透明度渐变效果的实现

暂时还未有时间开发这效果，所以先贴出来。

先贴一张效果图，这是一张手机截屏：

左上方的风景图：背景图片

右上方的人物图：前景图片

左边心型透明图：相框图片

右边心型黑色图：蒙板图片

功能：把前景图应用蒙板，添加相框效果，合成到后景图上面：

结果就是下面的那张图片了。

还有一种是透明度渐变的，效果图如下：

因为只有透明度渐变，没有相框。但实现上基本一样。

下面是实现过程，直接贴代码吧，其中写了比较详细的注释。只有一个文件，如下：

package com.example.androiddemo;


import android.os.Bundle;
import android.os.Environment;
import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.util.Log;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.ImageView;

public class MainActivity extends Activity {

    private static final String TAG = "liuzw";

    private ImageView picBGView;
    private ImageView pictureView;
    private ImageView maskView;
    private ImageView frameView;
    private ImageView resultView;
    private Button startProcess;
    private Bitmap picBitmap;
    private Bitmap maskBitmap;
    private Bitmap frameBitmap;
    private Bitmap resultBitmap;
    private Bitmap fengjingBitmap;
    private Bitmap composedBitmap;

    private final int WITHOUT = -1;
    private static final int FRAME = 0;
    private static final int MASK = 1;

//  private int[] resIds = new int[]{       //斜框锯齿
//          R.drawable.pip_6_frame,
//          R.drawable.pip_6_frame_mask,
//  };

//  private int[] resIds = new int[]{       //胶条
//          R.drawable.pip_1_frame,
//          R.drawable.pip_1_frame_mask,
//  };

    private int[] resIds = new int[]{       //渐变
            WITHOUT,
            R.drawable.pip_2_frame_mask,
    };

//  private int[] resIds = new int[]{       //心形
//          R.drawable.pip_3_frame,
//          R.drawable.pip_3_frame_mask,
//  };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        picBGView = (ImageView) findViewById(R.id.pic_bg);
        picBGView.setImageResource(R.drawable.fengjing);
        pictureView = (ImageView) findViewById(R.id.pic);
        pictureView.setImageResource(R.drawable.pip_test);
        maskView = (ImageView) findViewById(R.id.mask);
        maskView.setImageResource(resIds[MASK]);
        frameView = (ImageView) findViewById(R.id.frame);
        frameView.setImageResource(resIds[FRAME]);
        startProcess = (Button) findViewById(R.id.btnStart);
        startProcess.setOnClickListener(mListener);
        resultView = (ImageView) findViewById(R.id.showResult);

    }

    /**
     * 获得前置照片
     */
    private void getFrontPicture(){
        //蒙板的Bitmap
        if(maskBitmap == null || maskBitmap.isRecycled() && resIds[MASK] != WITHOUT){
            maskBitmap = BitmapFactory.decodeResource(this.getResources(), resIds[MASK]);
        }
        if(maskBitmap == null) return;

        //前置的原图，并将其缩放到跟蒙板大小一直
        if(picBitmap == null || picBitmap.isRecycled()){
            picBitmap = BitmapFactory.decodeResource(this.getResources(), R.drawable.pip_test);
            picBitmap = Bitmap.createScaledBitmap(picBitmap, maskBitmap.getWidth(), maskBitmap.getHeight(), false);
        }

        //相框的Bitmap
        if(frameBitmap == null || frameBitmap.isRecycled() && resIds[FRAME] != WITHOUT){
            frameBitmap = BitmapFactory.decodeResource(this.getResources(), resIds[FRAME]);
        }

        int w = maskBitmap.getWidth();
        int h = maskBitmap.getHeight();

        int edgeColor = maskBitmap.getPixel(1, 1);
        int centerColor = maskBitmap.getPixel(w/2, h/2);
        Log.d(TAG, "edgeColor = " + Integer.toHexString(edgeColor) + ", centerColor = " + Integer.toHexString(centerColor));

        if(resultBitmap == null){
            resultBitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
        }

        //这是背景的风景图
        if(fengjingBitmap == null){
            fengjingBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.fengjing);
        }

        //前置相片添加蒙板效果
        int[] picPixels = new int[w*h];
        int[] maskPixels = new int[w*h];
        picBitmap.getPixels(picPixels, 0, w, 0, 0, w, h);
        maskBitmap.getPixels(maskPixels, 0, w, 0, 0, w, h);
        for(int i = 0; i < maskPixels.length; i++){
            if(maskPixels[i] == 0xff000000){
                picPixels[i] = 0;
            }else if(maskPixels[i] == 0){
                //donothing
            }else{
                //把mask的a通道应用与picBitmap
                maskPixels[i] &= 0xff000000;
                maskPixels[i] = 0xff000000 - maskPixels[i];
                picPixels[i] &= 0x00ffffff;
                picPixels[i] |= maskPixels[i];
            }
        }

        //生成前置图片添加蒙板后的bitmap:resultBitmap
        resultBitmap.setPixels(picPixels, 0, w, 0, 0, w, h);
    }

    /**
     * 图片合成
     */
    private void compose(){
        if(fengjingBitmap == null || fengjingBitmap.isRecycled()){
            Log.e(TAG, "compose ERROR: fengjingBitmap is not valuable");
            return;
        }
        composedBitmap = Bitmap.createBitmap(fengjingBitmap.getWidth(), fengjingBitmap.getHeight(), Bitmap.Config.ARGB_8888);
        if(composedBitmap == null || composedBitmap.isRecycled()){
            Log.e(TAG, "compose ERROR: composedBitmap is not valuable");
            return;
        }
        if(resultBitmap == null || resultBitmap.isRecycled()){
            Log.e(TAG, "compose ERROR: resultBitmap is not valuable");
            return;
        }
        Canvas cv = new Canvas(composedBitmap);
        cv.drawBitmap(fengjingBitmap, 0, 0, null);
        cv.drawBitmap(resultBitmap, 100, 100, null);

        if(frameBitmap != null && !frameBitmap.isRecycled()){
            cv.drawBitmap(frameBitmap, 100, 100, null);
        }

        cv.save(Canvas.ALL_SAVE_FLAG);
        cv.restore();
        resultView.setImageBitmap(composedBitmap);
    }

    @Override
    protected void onDestroy() {
        // TODO Auto-generated method stub
        super.onDestroy();
        //释放资源
        resultView.setImageBitmap(null);
        if(picBitmap != null && !picBitmap.isRecycled()){
            picBitmap.recycle();
            picBitmap = null;
        }
        if(maskBitmap != null && !maskBitmap.isRecycled()){
            maskBitmap.recycle();
            maskBitmap = null;
        }
        if(frameBitmap != null && !frameBitmap.isRecycled()){
            frameBitmap.recycle();
            frameBitmap = null;
        }
        if(resultBitmap != null && !resultBitmap.isRecycled()){
            resultBitmap.recycle();
            resultBitmap = null;
        }
        if(fengjingBitmap != null && !fengjingBitmap.isRecycled()){
            fengjingBitmap.recycle();
            fengjingBitmap = null;
        }
        if(composedBitmap != null && !composedBitmap.isRecycled()){
            composedBitmap.recycle();
            composedBitmap = null;
        }
    }

    private OnClickListener mListener = new OnClickListener(){

        @Override
        public void onClick(View v) {
            // TODO Auto-generated method stub
            switch(v.getId()){
            case R.id.btnStart:
                getFrontPicture();
                compose();
                break;
            }
        }

    };

}

为了完整和方便参考，把布局文件也贴一下，如下：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffffff"
    tools:context=".MainActivity" >

    <LinearLayout
        android:id="@+id/views1"
        android:layout_width="match_parent"
        android:layout_height="150dip"
        android:orientation="horizontal" >

         <ImageView
            android:id="@+id/pic_bg"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1.0" />

        <ImageView
            android:id="@+id/pic"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1.0" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/views2"
        android:layout_below="@+id/views1"
        android:layout_width="match_parent"
        android:layout_height="150dip"
        android:orientation="horizontal" >


        <ImageView
            android:id="@+id/frame"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1.0" />

        <ImageView
            android:id="@+id/mask"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1.0" />

    </LinearLayout>

    <Button
        android:id="@+id/btnStart"
        android:layout_below="@+id/views2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Start" />

    <ImageView
        android:id="@+id/showResult"
        android:layout_below="@+id/btnStart"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

</RelativeLayout>