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

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

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

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

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

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

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

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

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

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

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

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

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

[java] view
plaincopy

1. package com.example.androiddemo;
2. import android.os.Bundle;
3. import android.os.Environment;
4. import android.app.Activity;
5. import android.graphics.Bitmap;
6. import android.graphics.BitmapFactory;
7. import android.graphics.Canvas;
8. import android.util.Log;
9. import android.view.View;
10. import android.view.View.OnClickListener;
11. import android.widget.Button;
12. import android.widget.ImageView;
13. public class MainActivity extends Activity {
14. private static final String TAG = "liuzw";
15. private ImageView picBGView;
16. private ImageView pictureView;
17. private ImageView maskView;
18. private ImageView frameView;
19. private ImageView resultView;
20. private Button startProcess;
21. private Bitmap picBitmap;
22. private Bitmap maskBitmap;
23. private Bitmap frameBitmap;
24. private Bitmap resultBitmap;
25. private Bitmap fengjingBitmap;
26. private Bitmap composedBitmap;
27. private final int WITHOUT = -1;
28. private static final int FRAME = 0;
29. private static final int MASK = 1;
30. //  private int[] resIds = new int[]{       //斜框锯齿
31. //          R.drawable.pip_6_frame,
32. //          R.drawable.pip_6_frame_mask,
33. //  };
34. //  private int[] resIds = new int[]{       //胶条
35. //          R.drawable.pip_1_frame,
36. //          R.drawable.pip_1_frame_mask,
37. //  };
38. private int[] resIds = new int[]{       //渐变
39. WITHOUT,
40. R.drawable.pip_2_frame_mask,
41. };
42. //  private int[] resIds = new int[]{       //心形
43. //          R.drawable.pip_3_frame,
44. //          R.drawable.pip_3_frame_mask,
45. //  };
46. @Override
47. protected void onCreate(Bundle savedInstanceState) {
48. super.onCreate(savedInstanceState);
49. setContentView(R.layout.activity_main);
50. picBGView = (ImageView) findViewById(R.id.pic_bg);
51. picBGView.setImageResource(R.drawable.fengjing);
52. pictureView = (ImageView) findViewById(R.id.pic);
53. pictureView.setImageResource(R.drawable.pip_test);
54. maskView = (ImageView) findViewById(R.id.mask);
55. maskView.setImageResource(resIds[MASK]);
56. frameView = (ImageView) findViewById(R.id.frame);
57. frameView.setImageResource(resIds[FRAME]);
58. startProcess = (Button) findViewById(R.id.btnStart);
59. startProcess.setOnClickListener(mListener);
60. resultView = (ImageView) findViewById(R.id.showResult);
61. }
62. /**
63. * 获得前置照片
64. */
65. private void getFrontPicture(){
66. //蒙板的Bitmap
67. if(maskBitmap == null || maskBitmap.isRecycled() && resIds[MASK] != WITHOUT){
68. maskBitmap = BitmapFactory.decodeResource(this.getResources(), resIds[MASK]);
69. }
70. if(maskBitmap == null) return;
71. //前置的原图，并将其缩放到跟蒙板大小一直
72. if(picBitmap == null || picBitmap.isRecycled()){
73. picBitmap = BitmapFactory.decodeResource(this.getResources(), R.drawable.pip_test);
74. picBitmap = Bitmap.createScaledBitmap(picBitmap, maskBitmap.getWidth(), maskBitmap.getHeight(), false);
75. }
76. //相框的Bitmap
77. if(frameBitmap == null || frameBitmap.isRecycled() && resIds[FRAME] != WITHOUT){
78. frameBitmap = BitmapFactory.decodeResource(this.getResources(), resIds[FRAME]);
79. }
80. int w = maskBitmap.getWidth();
81. int h = maskBitmap.getHeight();
82. int edgeColor = maskBitmap.getPixel(1, 1);
83. int centerColor = maskBitmap.getPixel(w/2, h/2);
84. Log.d(TAG, "edgeColor = " + Integer.toHexString(edgeColor) + ", centerColor = " + Integer.toHexString(centerColor));
85. if(resultBitmap == null){
86. resultBitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
87. }
88. //这是背景的风景图
89. if(fengjingBitmap == null){
90. fengjingBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.fengjing);
91. }
92. //前置相片添加蒙板效果
93. int[] picPixels = new int[w*h];
94. int[] maskPixels = new int[w*h];
95. picBitmap.getPixels(picPixels, 0, w, 0, 0, w, h);
96. maskBitmap.getPixels(maskPixels, 0, w, 0, 0, w, h);
97. for(int i = 0; i < maskPixels.length; i++){
98. if(maskPixels[i] == 0xff000000){
99. picPixels[i] = 0;
100. }else if(maskPixels[i] == 0){
101. //donothing
102. }else{
103. //把mask的a通道应用与picBitmap
104. maskPixels[i] &= 0xff000000;
105. maskPixels[i] = 0xff000000 - maskPixels[i];
106. picPixels[i] &= 0x00ffffff;
107. picPixels[i] |= maskPixels[i];
108. }
109. }
110. //生成前置图片添加蒙板后的bitmap:resultBitmap
111. resultBitmap.setPixels(picPixels, 0, w, 0, 0, w, h);
112. }
113. /**
114. * 图片合成
115. */
116. private void compose(){
117. if(fengjingBitmap == null || fengjingBitmap.isRecycled()){
118. Log.e(TAG, "compose ERROR: fengjingBitmap is not valuable");
119. return;
120. }
121. composedBitmap = Bitmap.createBitmap(fengjingBitmap.getWidth(), fengjingBitmap.getHeight(), Bitmap.Config.ARGB_8888);
122. if(composedBitmap == null || composedBitmap.isRecycled()){
123. Log.e(TAG, "compose ERROR: composedBitmap is not valuable");
124. return;
125. }
126. if(resultBitmap == null || resultBitmap.isRecycled()){
127. Log.e(TAG, "compose ERROR: resultBitmap is not valuable");
128. return;
129. }
130. Canvas cv = new Canvas(composedBitmap);
131. cv.drawBitmap(fengjingBitmap, 0, 0, null);
132. cv.drawBitmap(resultBitmap, 100, 100, null);
133. if(frameBitmap != null && !frameBitmap.isRecycled()){
134. cv.drawBitmap(frameBitmap, 100, 100, null);
135. }
136. cv.save(Canvas.ALL_SAVE_FLAG);
137. cv.restore();
138. resultView.setImageBitmap(composedBitmap);
139. }
140. @Override
141. protected void onDestroy() {
142. // TODO Auto-generated method stub
143. super.onDestroy();
144. //释放资源
145. resultView.setImageBitmap(null);
146. if(picBitmap != null && !picBitmap.isRecycled()){
147. picBitmap.recycle();
148. picBitmap = null;
149. }
150. if(maskBitmap != null && !maskBitmap.isRecycled()){
151. maskBitmap.recycle();
152. maskBitmap = null;
153. }
154. if(frameBitmap != null && !frameBitmap.isRecycled()){
155. frameBitmap.recycle();
156. frameBitmap = null;
157. }
158. if(resultBitmap != null && !resultBitmap.isRecycled()){
159. resultBitmap.recycle();
160. resultBitmap = null;
161. }
162. if(fengjingBitmap != null && !fengjingBitmap.isRecycled()){
163. fengjingBitmap.recycle();
164. fengjingBitmap = null;
165. }
166. if(composedBitmap != null && !composedBitmap.isRecycled()){
167. composedBitmap.recycle();
168. composedBitmap = null;
169. }
170. }
171. private OnClickListener mListener = new OnClickListener(){
172. @Override
173. public void onClick(View v) {
174. // TODO Auto-generated method stub
175. switch(v.getId()){
176. case R.id.btnStart:
177. getFrontPicture();
178. compose();
179. break;
180. }
181. }
182. };
183. }

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

[html] view
plaincopy

1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
2. xmlns:tools="http://schemas.android.com/tools"
3. android:layout_width="match_parent"
4. android:layout_height="match_parent"
5. android:background="#ffffffff"
6. tools:context=".MainActivity" >
7. <LinearLayout
8. android:id="@+id/views1"
9. android:layout_width="match_parent"
10. android:layout_height="150dip"
11. android:orientation="horizontal" >
12. <ImageView
13. android:id="@+id/pic_bg"
14. android:layout_width="wrap_content"
15. android:layout_height="wrap_content"
16. android:layout_weight="1.0" />
17. <ImageView
18. android:id="@+id/pic"
19. android:layout_width="wrap_content"
20. android:layout_height="wrap_content"
21. android:layout_weight="1.0" />
22. </LinearLayout>
23. <LinearLayout
24. android:id="@+id/views2"
25. android:layout_below="@+id/views1"
26. android:layout_width="match_parent"
27. android:layout_height="150dip"
28. android:orientation="horizontal" >
29. <ImageView
30. android:id="@+id/frame"
31. android:layout_width="wrap_content"
32. android:layout_height="wrap_content"
33. android:layout_weight="1.0" />
34. <ImageView
35. android:id="@+id/mask"
36. android:layout_width="wrap_content"
37. android:layout_height="wrap_content"
38. android:layout_weight="1.0" />
39. </LinearLayout>
40. <Button
41. android:id="@+id/btnStart"
42. android:layout_below="@+id/views2"
43. android:layout_width="wrap_content"
44. android:layout_height="wrap_content"
45. android:text="Start" />
46. <ImageView
47. android:id="@+id/showResult"
48. android:layout_below="@+id/btnStart"
49. android:layout_width="wrap_content"
50. android:layout_height="wrap_content"/>
51. </RelativeLayout>