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,//};@Overrideprotected 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(){//蒙板的Bitmapif(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);}//相框的Bitmapif(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通道应用与picBitmapmaskPixels[i] &= 0xff000000;maskPixels[i] = 0xff000000 - maskPixels[i];picPixels[i] &= 0x00ffffff;picPixels[i] |= maskPixels[i];}}//生成前置图片添加蒙板后的bitmap:resultBitmapresultBitmap.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);}@Overrideprotected void onDestroy() {// TODO Auto-generated method stubsuper.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(){@Overridepublic void onClick(View v) {// TODO Auto-generated method stubswitch(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>