इस पेज का अनुवाद Cloud Translation API से किया गया है.

इमेज को पसंद के मुताबिक बनाना

Image कॉम्पोज़ेबल (contentScale, colorFilter) पर मौजूद प्रॉपर्टी का इस्तेमाल करके, इमेज को पसंद के मुताबिक बनाया जा सकता है. अपने Image पर अलग-अलग इफ़ेक्ट लागू करने के लिए, मौजूदा Modifiers को भी लागू किया जा सकता है. सिर्फ़ Image कॉम्पोनेंट के साथ ही नहीं, किसी भी कॉम्पोनेंट के साथ मॉडिफ़ायर का इस्तेमाल किया जा सकता है. वहीं, contentScale और colorFilter, Image कॉम्पोनेंट के लिए साफ़ तौर पर तय किए गए पैरामीटर हैं.

कॉन्टेंट का स्केल

इमेज को काटने या उसके बॉउंड के अंदर स्केल करने के तरीके में बदलाव करने के लिए, contentScale विकल्प चुनें. अगर आपने contentScale विकल्प नहीं चुना है, तो डिफ़ॉल्ट रूप से ContentScale.Fit का इस्तेमाल किया जाएगा.

नीचे दिए गए उदाहरण में, इमेज कॉम्पोज़ेबल का साइज़ 150dp और बॉर्डर वाला है. साथ ही, नीचे दी गई टेबल में ContentScale के अलग-अलग विकल्प दिखाने के लिए, Image कॉम्पोज़ेबल का बैकग्राउंड पीले रंग पर सेट किया गया है.

val imageModifier = Modifier
    .size(150.dp)
    .border(BorderStroke(1.dp, Color.Black))
    .background(Color.Yellow)
Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description),
    contentScale = ContentScale.Fit,
    modifier = imageModifier
)CustomizeImageSnippets.kt

ContentScale के अलग-अलग विकल्प सेट करने पर, अलग-अलग आउटपुट मिलेंगे. यहां एक टेबल दी गई है. इसकी मदद से, अपनी ज़रूरत के हिसाब से सही ContentScale मोड चुना जा सकता है:

सोर्स इमेज
`ContentScale`	नतीजा - पोर्ट्रेट इमेज:	नतीजा - लैंडस्केप इमेज:
`ContentScale.Fit`: आसपेक्ट रेशियो (डिफ़ॉल्ट) को बनाए रखते हुए, इमेज को एक जैसा स्केल करें. अगर कॉन्टेंट का साइज़ तय किए गए साइज़ से छोटा है, तो इमेज को बॉउंड में फ़िट करने के लिए बड़ा कर दिया जाता है.
`ContentScale.Crop`: उपलब्ध जगह में इमेज को बीच में रखकर काटें.
`ContentScale.FillHeight`: आसपेक्ट रेशियो को बनाए रखते हुए सोर्स को स्केल करें, ताकि बॉउंड, डेस्टिनेशन की ऊंचाई से मेल खा सकें.
`ContentScale.FillWidth`: आसपेक्ट रेशियो को बनाए रखते हुए सोर्स को स्केल करें, ताकि बॉउंड, डेस्टिनेशन की चौड़ाई से मेल खा सकें.
`ContentScale.FillBounds`: डेस्टिनेशन के बॉर्डर को भरने के लिए, कॉन्टेंट को वर्टिकल और हॉरिज़ॉन्टल तौर पर अलग-अलग स्केल करें. (ध्यान दें: अगर इमेज को ऐसे कंटेनर में डाला जाता है जो इमेज के आसपेक्ट रेशियो से मेल नहीं खाते, तो इमेज खराब हो जाएंगी)
`ContentScale.Inside`: डेस्टिनेशन के बाउंड में आसपेक्ट रेशियो बनाए रखने के लिए, सोर्स को स्केल करें. अगर सोर्स, दोनों डाइमेंशन में डेस्टिनेशन से छोटा या उसके बराबर है, तो यह `None` की तरह ही काम करता है. कॉन्टेंट हमेशा सीमाओं के अंदर ही रहेगा. अगर कॉन्टेंट, बॉउंड से छोटा है, तो स्केलिंग लागू नहीं होगी.	सोर्स इमेज, बॉर्डर से बड़ी है: सोर्स इमेज, बॉर्डर से छोटी है:	सोर्स इमेज, बॉर्डर से बड़ी है: सोर्स इमेज, बॉर्डर से छोटी है:
`ContentScale.None`: सोर्स पर कोई स्केलिंग लागू न करें. अगर कॉन्टेंट, डेस्टिनेशन के बाउंड से छोटा है, तो उसे क्षेत्र में फ़िट करने के लिए स्केल नहीं किया जाएगा.	सोर्स इमेज, बॉर्डर से बड़ी है: सोर्स इमेज, बॉर्डर से छोटी है:	सोर्स इमेज, बॉर्डर से बड़ी है: सोर्स इमेज, बॉर्डर से छोटी है:

किसी आकार में `Image` कॉम्पोज़ेबल को क्लिप करना

किसी इमेज को किसी आकार में फ़िट करने के लिए, डिवाइस में पहले से मौजूद clip मॉडिफ़ायर का इस्तेमाल करें. किसी इमेज को सर्कल के आकार में काटने के लिए, Modifier.clip(CircleShape) का इस्तेमाल करें:

Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description),
    contentScale = ContentScale.Crop,
    modifier = Modifier
        .size(200.dp)
        .clip(CircleShape)
)CustomizeImageSnippets.kt

**पहली इमेज**: CircleShape का इस्तेमाल करके इमेज को क्लिप करना

किनारों के गोल आकार - Modifier.clip(RoundedCornerShape(16.dp) का इस्तेमाल करें) और उन किनारों के साइज़ डालें जिनके किनारों को गोल करना है:

Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description),
    contentScale = ContentScale.Crop,
    modifier = Modifier
        .size(200.dp)
        .clip(RoundedCornerShape(16.dp))
)CustomizeImageSnippets.kt

**दूसरी इमेज**: RoundedCornerShape का इस्तेमाल करके इमेज को क्लिप करना

Shape को बड़ा करके, अपनी पसंद का क्लिपिंग आकार भी बनाया जा सकता है. साथ ही, क्लिप करने के लिए आकार के तौर पर Path भी दिया जा सकता है:

class SquashedOval : Shape {
    override fun createOutline(
        size: Size,
        layoutDirection: LayoutDirection,
        density: Density
    ): Outline {
        val path = Path().apply {
            // We create an Oval that starts at ¼ of the width, and ends at ¾ of the width of the container.
            addOval(
                Rect(
                    left = size.width / 4f,
                    top = 0f,
                    right = size.width * 3 / 4f,
                    bottom = size.height
                )
            )
        }
        return Outline.Generic(path = path)
    }
}

Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description),
    contentScale = ContentScale.Crop,
    modifier = Modifier
        .size(200.dp)
        .clip(SquashedOval())
)CustomizeImageSnippets.kt

पसंद के मुताबिक पाथ के आकार में इमेज को क्लिप करना — **तीसरी इमेज**: कस्टम पाथ शेप की मदद से इमेज को क्लिप करना

`Image` कॉम्पोज़ेबल में बॉर्डर जोड़ना

इमेज के चारों ओर बॉर्डर बनाने के लिए, Modifier.border() को Modifier.clip() के साथ जोड़ना एक सामान्य तरीका है:

val borderWidth = 4.dp
Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description),
    contentScale = ContentScale.Crop,
    modifier = Modifier
        .size(150.dp)
        .border(
            BorderStroke(borderWidth, Color.Yellow),
            CircleShape
        )
        .padding(borderWidth)
        .clip(CircleShape)
)CustomizeImageSnippets.kt

**चौथी इमेज**: किसी इमेज को क्लिप करना और उसके चारों ओर बॉर्डर जोड़ना

अगर आपको ग्रेडिएंट बॉर्डर बनाना है, तो इमेज के चारों ओर रेनबो ग्रेडिएंट बॉर्डर बनाने के लिए, Brush एपीआई का इस्तेमाल किया जा सकता है:

val rainbowColorsBrush = remember {
    Brush.sweepGradient(
        listOf(
            Color(0xFF9575CD),
            Color(0xFFBA68C8),
            Color(0xFFE57373),
            Color(0xFFFFB74D),
            Color(0xFFFFF176),
            Color(0xFFAED581),
            Color(0xFF4DD0E1),
            Color(0xFF9575CD)
        )
    )
}
val borderWidth = 4.dp
Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description),
    contentScale = ContentScale.Crop,
    modifier = Modifier
        .size(150.dp)
        .border(
            BorderStroke(borderWidth, rainbowColorsBrush),
            CircleShape
        )
        .padding(borderWidth)
        .clip(CircleShape)
)CustomizeImageSnippets.kt

रेनबो ग्रेडिएंट वाला सर्कल बॉर्डर — **पांचवीं इमेज**: रेनबो ग्रेडिएंट सर्कल बॉर्डर

आसपेक्ट रेशियो या चौड़ाई-ऊंचाई का अनुपात अपने हिसाब से सेट करना

किसी इमेज को कस्टम आसपेक्ट रेशियो में बदलने के लिए, Modifier.aspectRatio(16f/9f) का इस्तेमाल करें. इससे, किसी इमेज (या उससे मिलती-जुलती किसी भी चीज़) के लिए कस्टम रेशियो दिया जा सकता है.

Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description),
    modifier = Modifier.aspectRatio(16f / 9f)
)CustomizeImageSnippets.kt

इमेज पर Modifier.aspectRatio(16f/9f) का इस्तेमाल करना — **छठी इमेज**: इमेज पर `Modifier.aspectRatio(16f/9f)` का इस्तेमाल करना

कलर फ़िल्टर - इमेज के पिक्सल के रंग बदलना

इमेज कॉम्पोज़ेबल में colorFilter पैरामीटर होता है. इससे आपकी इमेज के अलग-अलग पिक्सल का आउटपुट बदला जा सकता है.

इमेज को रंगीन करना

ColorFilter.tint(color, blendMode) का इस्तेमाल करने पर, आपके Image कॉम्पोज़ेबल पर दिए गए रंग के साथ ब्लेंड मोड लागू हो जाएगा. ColorFilter.tint(color, blendMode), कॉन्टेंट को रंगीन बनाने के लिए BlendMode.SrcIn का इस्तेमाल करता है. इसका मतलब है कि स्क्रीन पर इमेज जहां दिखेगी वहां दिया गया रंग दिखेगा. यह उन आइकॉन और वैक्टर के लिए फ़ायदेमंद है जिन्हें अलग-अलग थीम में दिखाना है.

Image(
    painter = painterResource(id = R.drawable.baseline_directions_bus_24),
    contentDescription = stringResource(id = R.string.bus_content_description),
    colorFilter = ColorFilter.tint(Color.Yellow)
)CustomizeImageSnippets.kt

**सातवां इलस्ट्रेशन**: BlendMode.SrcIn के साथ लागू किया गया ColorFilter.tint

अन्य BlendMode के नतीजे अलग-अलग होते हैं. उदाहरण के लिए, किसी इमेज पर Color.Green के साथ BlendMode.Darken सेट करने पर, यह नतीजा मिलता है:

Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description),
    colorFilter = ColorFilter.tint(Color.Green, blendMode = BlendMode.Darken)
)CustomizeImageSnippets.kt

BlendMode.Darken के साथ Color.Green टिन्ट — **आठवीं इमेज**: Color.Green tint with BlendMode.Darken

उपलब्ध अलग-अलग ब्लेंड मोड के बारे में ज़्यादा जानकारी के लिए, BlendMode का रेफ़रंस दस्तावेज़ देखें.

कलर मैट्रिक्स के साथ `Image` फ़िल्टर लागू करना

कलर मैट्रिक ColorFilter विकल्प का इस्तेमाल करके, अपनी इमेज में बदलाव करें. उदाहरण के लिए, अपनी इमेज पर ब्लैक ऐंड व्हाइट फ़िल्टर लागू करने के लिए, ColorMatrix का इस्तेमाल करें और संतृप्ति को 0f पर सेट करें.

Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description),
    colorFilter = ColorFilter.colorMatrix(ColorMatrix().apply { setToSaturation(0f) })
)CustomizeImageSnippets.kt

कलर मैट्रिक्स, जिसमें संतृप्ति 0 है (ब्लैक ऐंड व्हाइट इमेज) — **नौवीं इमेज**: संतृप्ति 0 (ब्लैक ऐंड व्हाइट इमेज) वाला कलर मैट्रिक्स

`Image` कॉम्पोज़ेबल के कंट्रास्ट या चमक को अडजस्ट करना

किसी इमेज का कंट्रास्ट और उसकी चमक बदलने के लिए, वैल्यू बदलने के लिए ColorMatrix का इस्तेमाल किया जा सकता है:

val contrast = 2f // 0f..10f (1 should be default)
val brightness = -180f // -255f..255f (0 should be default)
val colorMatrix = floatArrayOf(
    contrast, 0f, 0f, 0f, brightness,
    0f, contrast, 0f, 0f, brightness,
    0f, 0f, contrast, 0f, brightness,
    0f, 0f, 0f, 1f, 0f
)
Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description),
    colorFilter = ColorFilter.colorMatrix(ColorMatrix(colorMatrix))
)CustomizeImageSnippets.kt

ColorMatrix का इस्तेमाल करके, इमेज की चमक और कंट्रास्ट में बदलाव करना — **पहली इमेज**: ColorMatrix का इस्तेमाल करके, इमेज की चमक और कंट्रास्ट में बदलाव किया गया

`Image` कॉम्पोज़ेबल के रंग उलटना

किसी इमेज के रंगों को उलटने के लिए, रंगों को उलटने के लिए ColorMatrix को सेट करें:

val colorMatrix = floatArrayOf(
    -1f, 0f, 0f, 0f, 255f,
    0f, -1f, 0f, 0f, 255f,
    0f, 0f, -1f, 0f, 255f,
    0f, 0f, 0f, 1f, 0f
)
Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description),
    colorFilter = ColorFilter.colorMatrix(ColorMatrix(colorMatrix))
)CustomizeImageSnippets.kt

इमेज के रंग उलटने की सुविधा — **इमेज 11**: इमेज के रंग उलट दिए गए हैं

`Image` कॉम्पोज़ेबल को धुंधला करना

किसी इमेज को धुंधला करने के लिए, Modifier.blur() का इस्तेमाल करें. साथ ही, radiusX और radiusY की वैल्यू दें. इससे, हॉरिज़ॉन्टल और वर्टिकल दिशा में धुंधला करने के लिए त्रिज्या तय होती है.

Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description),
    contentScale = ContentScale.Crop,
    modifier = Modifier
        .size(150.dp)
        .blur(
            radiusX = 10.dp,
            radiusY = 10.dp,
            edgeTreatment = BlurredEdgeTreatment(RoundedCornerShape(8.dp))
        )
)CustomizeImageSnippets.kt

Images को धुंधला करते समय, हमारा सुझाव है कि आप BlurredEdgeTreatment.Unbounded के बजाय BlurredEdgeTreatment(Shape) का इस्तेमाल करें. ऐसा इसलिए, क्योंकि BlurredEdgeTreatment.Unbounded का इस्तेमाल, ऐसे रेंडरिंग को धुंधला करने के लिए किया जाता है जो मूल कॉन्टेंट की सीमाओं के बाहर रेंडर हो सकते हैं. ऐसा हो सकता है कि इमेज, कॉन्टेंट के दायरे से बाहर न दिखें. हालांकि, राउंडेड रेक्टैंगल को धुंधला करने के लिए, इस तरह के अंतर की ज़रूरत पड़ सकती है.

उदाहरण के लिए, अगर ऊपर दी गई इमेज पर BlurredEdgeTreatment को अनबाउंडेड पर सेट किया जाता है, तो इमेज के किनारे शार्प के बजाय धुंधले दिखते हैं:

Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description),
    contentScale = ContentScale.Crop,
    modifier = Modifier
        .size(150.dp)
        .blur(
            radiusX = 10.dp,
            radiusY = 10.dp,
            edgeTreatment = BlurredEdgeTreatment.Unbounded
        )
        .clip(RoundedCornerShape(8.dp))
)CustomizeImageSnippets.kt

**इमेज 13**: BlurEdgeTreatment.Unbounded

आपके लिए सुझाव

ध्यान दें: JavaScript बंद होने पर लिंक टेक्स्ट दिखता है
ग्राफ़िक्स में बदलाव करने वाले टूल
इमेज लोड हो रही हैं {:#loading-images}
Material आइकॉन {:#material-icons}

पीछे जाएं

मटीरियल आइकॉन

आगे बढ़ें

पसंद के मुताबिक पेंटर

इमेज को पसंद के मुताबिक बनाना

कॉन्टेंट का स्केल

किसी आकार में Image कॉम्पोज़ेबल को क्लिप करना

Image कॉम्पोज़ेबल में बॉर्डर जोड़ना