Make an Image Editing Application in 10 Minutes
In this article, we will be creating a sample application that can create a Depth of Field effect without any DSLR, using the HMS ML Kit.
Join the DZone community and get the full member experience.
Join For FreeIntroduction
We will use the HMS ML Kit in order to complete the following tasks:
Extract a user from an image using Image Segmentation,
Add Blur effect on the image,
Create a new wonderful result using Huawei ML Kit.
We will be using both the camera and gallery as input.
Demo
To use the demo, go to AppGallery and download the above application. Edit IT.
As we are using cloud services here, Internet connectivity is required.
Steps to Build the Application
1. Add Maven URL in buildscript and allprojects.
Java
x
1
maven { url 'http://developer.huawei.com/repo/' }
2. Add classpath.
Java
xxxxxxxxxx
1
1
classpath 'com.huawei.agconnect:agcp:1.2.1.301'
3. Add the below dependency in the app level Gradle file.
Java
xxxxxxxxxx
1
12
1
ext {
2
mlKitVersion = '1.0.4.301'
3
lifecycleExtension = '2.2.0'
4
}
5
6
implementation "androidx.lifecycle:lifecycle-extensions:$lifecycleExtension"
7
// Import the base SDK.
8
implementation "com.huawei.hms:ml-computer-vision-segmentation:$mlKitVersion"
9
// Import the multiclass segmentation model package.
10
implementation "com.huawei.hms:ml-computer-vision-image-segmentation-multiclass-model:$mlKitVersion"
11
// Import the human body segmentation model package.
12
implementation "com.huawei.hms:ml-computer-vision-image-segmentation-body-model:$mlKitVersion"
4. Add the below permissions in the manifest file.
Java
xxxxxxxxxx
1
1
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
2
<uses-permission android:name="android.permission.CAMERA" />
3
<uses-permission android:name="android.permission.INTERNET" />
5. Add the below code to auto-update the model when a new one arrives on the server.
Java
xxxxxxxxxx
1
1
<meta-data
2
android:name="com.huawei.hms.ml.DEPENDENCY"
3
android:value="imgseg" />
Open your main activity and add 2 buttons. With one, you can open a gallery, and with another, you can open a camera.
Below is the code for both of them.
6. Upload by Camera
Java
xxxxxxxxxx
1
1
private fun uploadByCamera() {
2
imageSegmentationViewModel.background.value?.recycle()
3
seekBar.progress = 0
4
val takePicture = Intent(MediaStore.ACTION_IMAGE_CAPTURE)
5
startActivityForResult(takePicture, 1222)
6
}
7. Upload by Gallery
Java
xxxxxxxxxx
1
1
private fun uploadByGallery() {
2
imageSegmentationViewModel.background.value?.recycle()
3
seekBar.progress = 0
4
val photoPickerIntent = Intent(Intent.ACTION_PICK, android.provider.MediaStore.Images.Media.EXTERNAL_CONTENT_URI)
5
startActivityForResult(
6
Intent.createChooser(photoPickerIntent, "Choosing picture from gallery"),
7
loadImageGalleryCode
8
)
9
}
After the pic selection, the control will come insideonActivityResult(), where you will get the result bitmap. This bitmap we have to pass on to theimageSegmentation()method.
Java
xxxxxxxxxx
1
25
1
override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
2
super.onActivityResult(requestCode, resultCode, data)
3
if (requestCode == loadImageGalleryCode && resultCode == Activity.RESULT_OK && data != null) {
4
seekBar.visibility = View.VISIBLE
5
val pickedImage: Uri? = data.data
6
val filePath = arrayOf(MediaStore.Images.Media.DATA)
7
val cursor: Cursor? = contentResolver.query(pickedImage!!, filePath, null, null, null)
8
cursor!!.moveToFirst()
9
val imagePath: String = cursor.getString(cursor.getColumnIndex(filePath[0]))
10
val options = BitmapFactory.Options()
11
options.inPreferredConfig = Bitmap.Config.ARGB_8888
12
val bitmap: Bitmap = BitmapFactory.decodeFile(imagePath, options)
13
imageView.setImageBitmap(bitmap)
14
imageSegmentationViewModel.background.value = bitmap
15
imageSegmentationViewModel.originalImage.value = bitmap
16
imageSegmentationViewModel.imageSegmentation()
17
cursor.close()
18
} else if (requestCode == loadImageCameraCode && resultCode == Activity.RESULT_OK && data != null) {
19
seekBar.visibility = View.VISIBLE
20
val bitmap: Bitmap? = data.extras!!["data"] as Bitmap?
21
imageSegmentationViewModel.background.value = bitmap
22
imageSegmentationViewModel.originalImage.value = bitmap
23
imageSegmentationViewModel.imageSegmentation()
24
}
25
}
8. Add the below imageSegmentation()method in activity or ViewModel as per your application design.
Create a copy of the previously fetched bitmap and pass it to this method.
This method is using a copy image and extracting the human boy from it. If the response is successful, we will get the callback insideaddOnSuccessListener(). Finally, it saves the extracted image, which only contains a human body.
Java
xxxxxxxxxx
1
19
1
fun imageSegmentation(){
2
val setting = MLImageSegmentationSetting.Factory()
3
.setExact(false)
4
.setAnalyzerType(MLImageSegmentationSetting.BODY_SEG)
5
.setScene(MLImageSegmentationScene.ALL)
6
.create()
7
analyzer = MLAnalyzerFactory.getInstance()
8
.getImageSegmentationAnalyzer(setting)
9
10
val frame = MLFrame.fromBitmap(originalImage.value)
11
val task = analyzer.asyncAnalyseFrame(frame)
12
task.addOnSuccessListener {
13
extractedImage.value = it.foreground
14
}.addOnFailureListener {
15
Log.d("Image Segmentation: ", "Error occurred: "+it.message)
16
}
17
18
analyzer.stop()
19
}
Create a SeekBar with the below properties and call theblurRenderScript()method if the progress of SeekBar is changed.
The range of SeekBar is from 0 to 100, but in our blurRenderScript, we are cannot accept a value above 25; hence we are using the relative value of SeekBar progress by dividing it by 4.
Java
xxxxxxxxxx
1
16
1
seekBar.progressDrawable.setColorFilter(Color.WHITE, PorterDuff.Mode.SRC_IN)
2
seekBar.thumb.setColorFilter(Color.WHITE, PorterDuff.Mode.SRC_IN)
3
seekBar.setOnSeekBarChangeListener(object : SeekBar.OnSeekBarChangeListener{
4
override fun onProgressChanged(seekBar: SeekBar?, progress: Int, fromUser: Boolean) {
5
blurRenderScript(imageSegmentationViewModel.originalImage.value!!, progress / 4)
6
}
7
8
override fun onStartTrackingTouch(seekBar: SeekBar?) {
9
Toast.makeText(this,"Start Editing",Toast.LENGTH_SHORT).show()
10
}
11
12
override fun onStopTrackingTouch(seekBar: SeekBar?) {
13
Toast.makeText(this,"Stop Editing",Toast.LENGTH_SHORT).show()
14
}
15
16
})
9. Below, two methods are used to fetch a bitmap and create a blur effect on top of it.
Java
xxxxxxxxxx
1
30
1
private fun blurRenderScript(smallBitmap: Bitmap, radius: Int): Bitmap? {
2
var smallBitmap = smallBitmap
3
try {
4
smallBitmap = RGB565toARGB888(smallBitmap)
5
} catch (e: Exception) {
6
e.printStackTrace()
7
}
8
val bitmap = Bitmap.createBitmap(
9
smallBitmap.width, smallBitmap.height,
10
Bitmap.Config.ARGB_8888
11
)
12
val renderScript = RenderScript.create(this)
13
val blurInput = Allocation.createFromBitmap(renderScript, smallBitmap)
14
val blurOutput = Allocation.createFromBitmap(renderScript, bitmap)
15
val blur = ScriptIntrinsicBlur.create(
16
renderScript,
17
Element.U8_4(renderScript)
18
)
19
blur.setInput(blurInput)
20
if (radius<= 0 || radius > 25) {
21
blur.setRadius(1.toFloat()) // radius must be 0 < r <= 25
22
} else {
23
blur.setRadius(radius.toFloat()) // radius must be 0 < r <= 25
24
}
25
blur.forEach(blurOutput)
26
blurOutput.copyTo(bitmap)
27
renderScript.destroy()
28
combineBitmaps(bitmap!! , imageSegmentationViewModel.extractedImage.value!!)
29
return bitmap
30
}
Java
xxxxxxxxxx
1
16
1
(java.lang.Exception::class)
2
private fun RGB565toARGB888(img: Bitmap): Bitmap {
3
val numPixels = img.width * img.height
4
val pixels = IntArray(numPixels)
5
6
//Get JPEG pixels. Each int is the color values for one pixel.
7
img.getPixels(pixels, 0, img.width, 0, 0, img.width, img.height)
8
9
//Create a Bitmap of the appropriate format.
10
val result =
11
Bitmap.createBitmap(img.width, img.height, Bitmap.Config.ARGB_8888)
12
13
//Set RGB pixels.
14
result.setPixels(pixels, 0, result.width, 0, 0, result.width, result.height)
15
return result
16
}
10. Once your background image is blurred, you can combine the previously extracted body image on top of the blurred image. By this, without any masking, you will get a radius blur effect inside your picture.
Java
xxxxxxxxxx
1
1
private fun combineBitmaps(bmp1: Bitmap, bmp2: Bitmap) {
2
val bmOverlay = Bitmap.createBitmap(bmp1.getWidth(), bmp1.getHeight(), bmp1.getConfig())
3
val canvas = Canvas(bmOverlay)
4
canvas.drawBitmap(bmp1, Matrix(), null)
5
canvas.drawBitmap(bmp2, 0.toFloat(), 0.toFloat(), null)
6
imageSegmentationViewModel.background.value = bmOverlay
7
}
11. Last but not least, below is how we can request runtime permissions.
Java
xxxxxxxxxx
1
1
val permission = arrayOf(
2
Manifest.permission.INTERNET,
3
Manifest.permission.READ_EXTERNAL_STORAGE,
4
Manifest.permission.CAMERA
5
)
6
7
ActivityCompat.requestPermissions(this, permission, 1)
12. Here, we will get control over whether the permission is granted or revoked.
Java
xxxxxxxxxx
1
14
1
override fun onRequestPermissionsResult(requestCode: Int, permissions: Array<out String>, grantResults: IntArray) {
2
super.onRequestPermissionsResult(requestCode, permissions, grantResults)
3
when (requestCode) {
4
1 -> {
5
if (grantResults.isNotEmpty() && grantResults[1] == PackageManager.PERMISSION_GRANTED) {
6
boolean = true
7
} else {
8
boolean = false
9
Toast.makeText(this, "Permission denied to read your External storage", Toast.LENGTH_SHORT).show()
10
}
11
return
12
}
13
}
14
}
Result
Conclusion
Finally, your app is ready to test. I hope you enjoyed creating this application.
Topics:
dzone,
app development,
phone app development
Opinions expressed by DZone contributors are their own.
Comments