Android相框合成图片抠图

 近期公司有个需求,需要做一个照片加模板以及加相框支持拖拽,翻了翻资料实现一下,跟大家分享一下.

 主要使用Android 下的PorterDuffXfermode-> 这个东西对于操作2D图像很强大

 

 直接上代码

/**
 * 合成图片  不规则图片  拖拽显示部分区域
 */
public class AlbumImageView extends ImageView {

    public int ALBUM_IMAGE_TYPE = 0;   //合成图片类型

    public static final int ALBUM_IMAGE_SHAPE = 1001;   // 图片类型: 形状
    public static final int ALBUM_IMAGE_FRAME = 1002;   // 图片类型: 带相框的高大上图片

    private Bitmap[] bitmapMask = new Bitmap[2];   // 图片模板: 形状的只有1个   带相框的则有两个(一个是相框,一个是相框的阴影截取范围)
    private Bitmap src;   // 原图片

    private float xOffset = 0.f;   // x轴偏移
    private float yOffset = 0.f;   //y轴偏移

    private float downX = 0.0f;    //手指所在x坐标
    private float downY = 0.0f;    //手指所在y坐标


    public AlbumImageView(Context context, int image_type, Bitmap src, Bitmap[] bitmapMask, float xOffset, float yOffset) {
        super(context);
        this.ALBUM_IMAGE_TYPE = image_type;
        this.bitmapMask = bitmapMask;
        this.src = src;
        this.xOffset = xOffset;
        this.yOffset = yOffset;
        init();
    }

    public AlbumImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }


    /**
     * 初始化处理原图片 保证图片不能小于相框或形状
     */
    private void init() {
        if (src.getWidth() < bitmapMask[0].getWidth()) {  //如果原图片宽小于模板宽 按照等比例拉伸原图片
            Matrix matrix = new Matrix();
            matrix.postScale((float) bitmapMask[0].getWidth() / (float) src.getWidth(), (float) bitmapMask[0].getWidth() / (float) src.getWidth());
            src = Bitmap.createBitmap(src, 0, 0, src.getWidth(), src.getHeight(), matrix, true);
        }

        if (src.getHeight() < bitmapMask[0].getHeight()) { //如果原图片高小于模板搞 按照等比例拉伸原图片
            Matrix matrix2 = new Matrix();
            matrix2.postScale((float) bitmapMask[0].getHeight() / (float) src.getHeight(), (float) bitmapMask[0].getHeight() / (float) src.getHeight());
            src = Bitmap.createBitmap(src, 0, 0, src.getWidth(), src.getHeight(), matrix2, true);
        }

        this.setImageBitmap(resolveBitmap(-xOffset, -yOffset)); //设置Bitmap
    }

    /**
     * 处理图片 合成图片
     *
     * @param xOffset x轴偏移量
     * @param yOffset y轴偏移量
     * @return 返回合成之后的Bitmap
     */
    private Bitmap resolveBitmap(float xOffset, float yOffset) {
        Bitmap bmp = Bitmap.createBitmap(bitmapMask[0].getWidth(), bitmapMask[0].getHeight(), Bitmap.Config.ARGB_4444); //用模板生成一个bmp
        Paint paint = new Paint();  //初始化画笔
        if (ALBUM_IMAGE_TYPE == ALBUM_IMAGE_SHAPE) {
            paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_ATOP));  //PorterDuffXfermode算法  SRC_ATOP 取下层非交集部分与上层交集部分
            Canvas canvas = new Canvas(bmp);
            canvas.drawBitmap(bitmapMask[0], 0, 0, null);  // 画模板
            canvas.drawBitmap(src, xOffset, yOffset, paint); //画原图
            return bmp;
        } else {
            paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_ATOP));  //DST_ATOP 取上层非交集部分与下层交集部分
            Canvas canvas = new Canvas(bmp);
            canvas.drawBitmap(bitmapMask[0], 0, 0, null);
            canvas.drawBitmap(src, xOffset, yOffset, paint);

            Bitmap result = Bitmap.createBitmap(bitmapMask[1].getWidth(), bitmapMask[1].getHeight(), Bitmap.Config.ARGB_4444);  // 相框阴影部分图片
            Canvas canvas1 = new Canvas(result);
            Paint paint1 = new Paint();
            paint1.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_OUT));  // 然后再画阴影部分 SRC_OUT 取上层非交集部分 抠出相框和图片
            canvas1.drawBitmap(bitmapMask[1], 0, 0, null);
            canvas1.drawBitmap(bmp, 0, 0, paint1);
            bmp.recycle();
            return result;
        }
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        Log.i("gxh", "aaa");
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                downX = event.getX();
                downY = event.getY();
                break;
            case MotionEvent.ACTION_MOVE:
                int offsetX = -((int) downX - (int) event.getX());
                int offsetY = -((int) downY - (int) event.getY());
                xOffset += offsetX;
                yOffset += offsetY;
                //判断是否滑到边界
                if ((xOffset <= 0 && yOffset <= 0) && (src.getWidth() - Math.abs(xOffset) > bitmapMask[0].getWidth() && src.getHeight() - Math.abs(yOffset) > bitmapMask[0].getHeight())) {
                    this.setImageBitmap(resolveBitmap(xOffset, yOffset));
                } else {
                    //else 里面判断xy某一坐标滑到边界  另一个坐标还得继续移动 否则会出现问题
                    if (xOffset > 0) {
                        xOffset = 0;
                    }

                    if (yOffset > 0) {
                        yOffset = 0;
                    }

                    if (src.getWidth() - Math.abs(xOffset) < bitmapMask[0].getWidth()) {
                        xOffset = bitmapMask[0].getWidth() - src.getWidth();
                    }
                    if (src.getHeight() - Math.abs(yOffset) < bitmapMask[0].getHeight()) {
                        yOffset = bitmapMask[0].getHeight() - src.getHeight();
                    }
                    setImageBitmap(resolveBitmap(xOffset, yOffset));
                }
                downX = event.getX();
                downY = event.getY();
                break;
        }
        return true;
    }
}

这就是扩展了一个ImageView控件,使用起来也很简单,只需要传入类型,原图,相框及模板(如果只是形状传入1个模板,如果是不规则相框则需要两个),大家可以在源代码里面看一下相框及模板的例子,这就不多说了.

public class MainActivity extends AppCompatActivity {


    Bitmap dog;
    Bitmap maskSecond;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        dog = BitmapFactory.decodeResource(this.getResources(), R.drawable.dog);
        final Bitmap mask = BitmapFactory.decodeResource(this.getResources(), maskkk);
        maskSecond = BitmapFactory.decodeResource(this.getResources(), R.drawable.masksecond);
        AlbumImageView img = new AlbumImageView(this, AlbumImageView.ALBUM_IMAGE_FRAME, dog, new Bitmap[]{mask, maskSecond}, 0, 0);
        setContentView(img);
    }

}

CSDN源代码地址