裁剪/调整心形/相框图片

Question

我正在尝试按心形裁剪或调整图像。用户可以根据心形调整图像并将图像设置为该心形。

目前，我正在使用Android Image Cropper库将图像裁剪为正方形，并将其设置为心形。但是所有图像都从心形上弯曲的顶部被切断。因此，我希望允许用户根据心形边框裁剪图像，然后以用户想要的方式进行设置。但是没有任何库可以定制或使用。

以下是我从上面的GitHub项目中使用的当前代码：

1. 打开相机和图库：

   CropImage.activity().setGuidelines(CropImageView.Guidelines.ON).start(this);

2. 获取裁剪图像并将其设置为ImageHeart视图。

   CropImage.ActivityResult result = CropImage.getActivityResult(data);
   picUri = result.getUri();
   bitmap = MediaStore.Images.Media.getBitmap(this.getContentResolver(), picUri);
   imvHeartRed.setImageBitmap(bitmap);

这是一张图片，我正在使用正方形裁剪来裁剪玻璃，但在设置全景图像时不会显示完整的玻璃图像。但是，如果用户使用心形裁剪，则会显示整个玻璃，因为用户将知道图像的哪一部分将被裁剪。

我不想直接在心形中设置图像，但用户可以通过触摸/移动来调整图像在心形中的位置。

- Sandip Armal Patil

---

请查看这个库。希望它能对你有所帮助。 - Hemant Parmar

Answer 1

更新为仅在心形内设置透明度。

如果您只需要基于创建的形状戳出图像，则可以使用mafs-image-shape等库，但您需要提供一种在切割图像之前操作形状位置的方法。

我假设您依赖于Android-Image-Cropper的结构，因此以下更改适用于该库。所示代码基于Android-Image-Cropper中的选定代码，该代码根据Apache License 2.0获得许可。

以下是应用程序进行以下更改后的样子。接下来的讨论解释了如何更改基础代码以适应心形。

除了矩形和椭圆形外，需要将心形定义为一种选项。要将心形作为一个选项，可以更改CropImageView中的CropShape枚举，添加HEART作为裁剪形状，并在attrs中添加heart作为cropShape选项：

CropImageView.java

public enum CropShape {
    RECTANGLE,
    OVAL,
    HEART
}

attrs.xml

<attr name="cropShape">
    <enum name="rectangle" value="0"/>
    <enum name="oval" value="1"/>
    <enum name="heart" value="2"/>
</attr>

我使用了两个图像来制作心形。第一张图像是框架图像，用于将框架定位在底层图像上。裁剪图像与框架图像相同，但是在裁剪操作期间应该保留的位置是实心的（alpha == 1）。透明区域应将alpha设置为零。这是我使用的图像，但您需要使用自己的图像。

CropOverlayView是一个自定义视图，用于展示裁剪窗口和阴影背景。修改此类的drawBackground和drawBorders方法如下，以适应心形。

CropOverlayView.java

/**
 * Draw shadow background over the image not including the crop area.
 */
// Modifications made to accommodate heart cutouts
private void drawBackground(Canvas canvas) {

    RectF rect = mCropWindowHandler.getRect();

    float left = Math.max(BitmapUtils.getRectLeft(mBoundsPoints), 0);
    float top = Math.max(BitmapUtils.getRectTop(mBoundsPoints), 0);
    float right = Math.min(BitmapUtils.getRectRight(mBoundsPoints), getWidth());
    float bottom = Math.min(BitmapUtils.getRectBottom(mBoundsPoints), getHeight());

    if (mCropShape == CropImageView.CropShape.RECTANGLE) {
        if (!isNonStraightAngleRotated() || Build.VERSION.SDK_INT <= 17) {
            canvas.drawRect(left, top, right, rect.top, mBackgroundPaint);
            canvas.drawRect(left, rect.bottom, right, bottom, mBackgroundPaint);
            canvas.drawRect(left, rect.top, rect.left, rect.bottom, mBackgroundPaint);
            canvas.drawRect(rect.right, rect.top, right, rect.bottom, mBackgroundPaint);
        } else {
            mPath.reset();
            mPath.moveTo(mBoundsPoints[0], mBoundsPoints[1]);
            mPath.lineTo(mBoundsPoints[2], mBoundsPoints[3]);
            mPath.lineTo(mBoundsPoints[4], mBoundsPoints[5]);
            mPath.lineTo(mBoundsPoints[6], mBoundsPoints[7]);
            mPath.close();

            canvas.save();
            canvas.clipPath(mPath, Region.Op.INTERSECT);
            canvas.clipRect(rect, Region.Op.XOR);
            canvas.drawRect(left, top, right, bottom, mBackgroundPaint);
            canvas.restore();
        }
    } else if (mCropShape == CropImageView.CropShape.HEART) {
        Bitmap screen = Bitmap.createBitmap(canvas.getWidth(), canvas.getHeight(),
                                            Bitmap.Config.ARGB_8888);
        Canvas c = new Canvas(screen);
        // Draw the shadow background.
        c.drawRect(0, 0, right, bottom, mBackgroundPaint);

        // Punch out the heart shape.
        Bitmap heart = BitmapFactory.decodeResource(getResources(), R.drawable.heart_image_solid);
        heart = Bitmap.createScaledBitmap(heart, (int) rect.width(), (int) rect.height(), true);
        Paint paint = new Paint();
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OUT));
        c.drawBitmap(heart, rect.left, rect.top, paint);

        // Now overdraw with the heart frame.
        heart = BitmapFactory.decodeResource(getResources(), R.drawable.heart_image_frame);
        heart = Bitmap.createScaledBitmap(heart, (int) rect.width(), (int) rect.height(), true);
        c.drawBitmap(heart, rect.left, rect.top, null);
        canvas.drawBitmap(screen, 0, 0, null);
    } else {
        mPath.reset();
        if (Build.VERSION.SDK_INT <= 17 && mCropShape == CropImageView.CropShape.OVAL) {
            mDrawRect.set(rect.left + 2, rect.top + 2, rect.right - 2, rect.bottom - 2);
        } else {
            mDrawRect.set(rect.left, rect.top, rect.right, rect.bottom);
        }
        mPath.addOval(mDrawRect, Path.Direction.CW);
        canvas.save();
        canvas.clipPath(mPath, Region.Op.XOR);
        canvas.drawRect(left, top, right, bottom, mBackgroundPaint);
        canvas.restore();
    }
}

/**
 * Draw borders of the crop area.
 */
private void drawBorders(Canvas canvas) {
    if (mBorderPaint != null) {
        float w = mBorderPaint.getStrokeWidth();
        RectF rect = mCropWindowHandler.getRect();
        rect.inset(w / 2, w / 2);

        if (mCropShape == CropImageView.CropShape.RECTANGLE) {
            // Draw rectangle crop window border.
            canvas.drawRect(rect, mBorderPaint);
        } else if (mCropShape == CropImageView.CropShape.OVAL) {
            // Draw circular crop window border
            canvas.drawOval(rect, mBorderPaint);
        }
    }
}

请将以下方法添加到CropImage.java中。此方法将裁剪出心形图像并加框。

CropImage

/**
 * Create a new bitmap that has all pixels beyond the heart shape transparent. Old bitmap is
 * recycled.
 */
public static Bitmap toHeartBitmap(@NonNull Bitmap bitmap, @NonNull Context context) {
    int width = bitmap.getWidth();
    int height = bitmap.getHeight();
    Bitmap output = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);

    Canvas canvas = new Canvas(output);

    int color = 0xff424242;
    Paint paint = new Paint();

    paint.setAntiAlias(true);
    canvas.drawARGB(0, 0, 0, 0);
    paint.setColor(color);

    RectF rect = new RectF(0, 0, width, height);

    // Get solid heart to mask out the portion of the image we want to keep.
    Bitmap heart = BitmapFactory.decodeResource(context.getResources(), R.drawable.heart_image_solid);
    heart = Bitmap.createScaledBitmap(heart, width, height, true);
    canvas.drawBitmap(heart, 0, 0, null);

    // SRC_IN means to keep the portion of the bitmap that overlaps the solid heart. All pixels
    // from the solid heart and outside the solid heart area of the bitmap are tossed.
    paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
    canvas.drawBitmap(bitmap, 0, 0, paint);

    // We now have an unframed heart shape. Get the heart frame and apply it.
    heart = BitmapFactory.decodeResource(context.getResources(), R.drawable.heart_image_frame);
    heart = Bitmap.createScaledBitmap(heart, width, height, true);
    canvas.drawBitmap(heart, 0, 0, null);
    bitmap.recycle();
    return output;
}

这是演示应用程序的主活动，展示如何使用心形调用裁剪库：

MainActivity.java

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        findViewById(R.id.retry).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                cropImage();
            }
        });
        cropImage();
    }

    @Override
    public void onActivityResult(int requestCode, int resultCode, Intent data) {
        CropImage.ActivityResult result = CropImage.getActivityResult(data);
        if (result == null) {
            return;
        }
        Uri picUri = result.getUri();
        if (picUri == null) {
            return;
        }
        Bitmap bitmap;
        bitmap = MediaStore.Images.Media.getBitmap(this.getContentResolver(), picUri);
        }
        if (bitmap == null) {
            return;
        }
        ImageView imageView = findViewById(R.id.imageView);
        imageView.setImageBitmap(CropImage.toHeartBitmap(bitmap, this));
    }

    private void cropImage() {
        CropImage.activity().setGuidelines(CropImageView.Guidelines.ON)
            .setCropShape(CropImageView.CropShape.HEART)
            .start(MainActivity.this);
    }
}

- Cheticamp

Answer 2

如果要将特定图像转换为任何形状，您需要在该图像或具有特定形状的位图上应用遮罩（在您的情况下，遮罩图像将是心形）。请参考给定的链接。它可能会对您有所帮助。

链接：https://dev59.com/qmcs5IYBdhLWcg3wu2fS#12637039

- Hitesh Modhwadia

Answer 3

你需要使用类似于Opencv这样的东西，将心形图像简单地叠加到裁剪后的图像上。确保在想要叠加图像的区域，心形图像是透明的。

Mat heartMat = new Mat (bmp.getWidth(), bmp.getHeight(), CvType.CV_8UC3); Utils.bitmapToMat(bmp, heartMat);

Mat imgMat = new Mat (bmp.getWidth(), bmp.getHeight(), CvType.CV_8UC3); Utils.bitmapToMat(bmp, imgMat);

heartMat.copyTo(imgMat);

- Niza Siwale

---

我希望用户可以通过触摸/移动来调整图片。 - Sandip Armal Patil