SlideShare ist ein Scribd-Unternehmen logo
1 von 10
| Build a Mobile Experience

Image Handling in iOS

Corporate Office:
InnovationM Mobile Technologies
E-3 (Ground Floor), Sector-3, Noida 201301 (India)
t: +91 8447 227337 | e: info@innovationm.com

www.innovationm.com
| Build a Mobile Experience

www.innovationm.com

Image Handling in iOS
When we use images in our application then we face different type of scenarios while
handling the image. Before we go into the scenarios / situations of image handling in
Application, let us understand the concept of UIImage and UIImageView.

Concept of UIImage and UIImageView (container)
UIImage - Bitmap with different formats Ex png and jpeg. Recommended format is png.
UIImageView – This is an iOS Widget that acts like a container for holding the image.
To hold the image, UIImageView is required.
When UIImage is shown in UIImageView, there is a property (Content Mode) of
UIImageView, that render the Image in UIImageView.
We mostly use three types of Content Mode property. These are:


Scale To Fill



Aspect Fit



Aspect Fill

How this Content Mode renders the image we can see by following examples


UIImage of size (100×150)



UIImageView of size (200×200)

Corporate Office:
InnovationM Mobile Technologies
E-3 (Ground Floor), Sector-3, Noida 201301 (India)
t: +91 8447 227337 | e: info@innovationm.com
| Build a Mobile Experience

www.innovationm.com

Different Content modes for placing Image in ImageView
1. Scale to Fill
In this case, content is scaled to fill in ImageView with distorted or same aspect ratio. If
the image aspect ratio is different than that of container then final image ratio when
fitted in the container will be different and hence the image is finally distorted.
(Aspect Ratio is Width / Height)

2. Aspect Fit
In this case, content is scaled to fit in ImageView (container) without changing the
aspect ratio of image. Remainder is transparent.

Corporate Office:
InnovationM Mobile Technologies
E-3 (Ground Floor), Sector-3, Noida 201301 (India)
t: +91 8447 227337 | e: info@innovationm.com
| Build a Mobile Experience

www.innovationm.com

3. Aspect Fill without Clipping
In this case, image is scaled to fill in ImageView. Aspect ratio of image is not changed.

4. Aspect Fill with Clipping
In this case, content is scaled to fill in ImageView the same way it happen in the above
case but then finally image is cropped to the exact size of the ImageView size.

Corporate Office:
InnovationM Mobile Technologies
E-3 (Ground Floor), Sector-3, Noida 201301 (India)
t: +91 8447 227337 | e: info@innovationm.com
| Build a Mobile Experience

www.innovationm.com

Calculating new width and height with maintaining aspect ratio
Image original width = 100 and height = 150
Container width = 200 and height = 200
x-ratio = Container width / Image original width = 200/100 = 2.0
y-ratio = Container height / Image original height = 200/ 150 = 1.33
Selected ratio = min (x-ratio, y-ratio) = 1.33
Final Image width = Image original width * Selected Ratio = 100 * 1.33 = 133
Final Image height = Image original height * Selected Ratio = 150 * 1.33 = 200
Final Image width x height = 133 x 200 (Original width x height of image was 100 x 150)

Showing Images coming from Server (Different Scenarios)
We can use Aspect Fit mode for all the scenarios. It will serve in every scenario if you
don’t want to distort image.
Scenario 1
Image width is lesser than Container width.
Image height is lesser than Container height
Image width = 100 and height = 150
UIImageView width = 200 and height = 200
Final Image width = 133 and height = 200 (Refer the
calculations above)
Image is scaled up to fit the container.

Corporate Office:
InnovationM Mobile Technologies
E-3 (Ground Floor), Sector-3, Noida 201301 (India)
t: +91 8447 227337 | e: info@innovationm.com
| Build a Mobile Experience
Scenario 2
Image width is greater than Container width.
Image height is lesser than Container height
Image width = 100 and height = 150
UIImageView width = 80 and height = 200
Final Image width = 80 and height = 122
Image is scaled down to fit the container.
Scenario 3
Image width is lesser than Container width.
Image height is greater than Container height.
Image width = 100 and height = 150
UIImageView width = 200 and height = 120
Final width = 80 and height = 120
Image is scaled down to fit the container.

Scenario 4
Image width is greater than Container width.
Image height is greater than Container height.
Image width = 100 and height = 150
UIImageView width = 80 and height = 100
Final width = 66 and height = 100
Image is scaled down to fit the container.

Corporate Office:
InnovationM Mobile Technologies
E-3 (Ground Floor), Sector-3, Noida 201301 (India)
t: +91 8447 227337 | e: info@innovationm.com

www.innovationm.com
| Build a Mobile Experience
Scenario 5 (Same Aspect Ratio of Image and
ImageView)
Image width is greater than Container width.
Image height is greater than Container height.
Image width = 100 and height = 150
UIImageView width = 80 and height = 120
Final width = 80 and height = 120
Image is scaled down to fit the container.

Scenario 6 (Same Aspect Ratio of Image and
ImageView)
Image width is lesser than Container width.
Image height is lesser than Container height.
Image width = 100 and height = 150
UIImageView width = 120 and height = 180
Final width = 120 and height = 180
Image is scaled up to fit the container.

How we change the image size and compress image file size.

Corporate Office:
InnovationM Mobile Technologies
E-3 (Ground Floor), Sector-3, Noida 201301 (India)
t: +91 8447 227337 | e: info@innovationm.com

www.innovationm.com
| Build a Mobile Experience

www.innovationm.com

Uploading Images to the Server (Different Scenarios)
Many times we have to upload images in an application from device (iPhone, iPad) to
the server. It could be a photo clicked from the camera or there was an old image that
we choose and upload from the application.
Before uploading we can do two things with the image:
1. Change the width and height of original image.
2. Compress the image to be of smaller file size.
Let us understand them.
1. Change the width and height of original image.
To resize the image, we have to configure the drawing environment for rendering into a
bitmap.
1# UIGraphicsBeginImageContextWithOptions() method is used to create the bitmapbased graphics context.
This method takes two parameters:
1. Size of image (changed size) and
2. Scale factor of device as parameter.
Scale factor for Normal Display = 1.0
Scale factor for Retina Display = 2.0
2# – (void) drawInRect:(CGRect)rect; method is used to draw the image in target
rectangle.

Corporate Office:
InnovationM Mobile Technologies
E-3 (Ground Floor), Sector-3, Noida 201301 (India)
t: +91 8447 227337 | e: info@innovationm.com
| Build a Mobile Experience

www.innovationm.com

3# UIGraphicsGetImageFromCurrentImageContext() method is used to get the resized
image from drawing environment.
4# UIGraphicsEndImageContext() method is used to clean up the bitmap drawing
environment and remove the graphics context from the top of the context stack.
Example:
Original source Image Size = (2448, 3264)
Original source image file size = 3.8 MB
After resizing image to size (1024,768):
Resized source Image Size = (1024,768)
Resized source image file size = 2.0 MB
Code Example:
- (UIImage *) imageByScalingToSize:(CGSize)targetSize forImage:(UIImage *)sourceImage
{
UIImage *generatedImage = nil;
UIGraphicsBeginImageContextWithOptions(targetSize,NO,2.0);
[sourceImage drawInRect:CGRectMake(0, 0,targetSize.width,targetSize.height)];
generatedImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return generatedImage;
}

2. Compress the image to be of smaller file size.
We can compress the image file size by following method.
UIImageJPEGRepresentation() This method takes two parameter

Corporate Office:
InnovationM Mobile Technologies
E-3 (Ground Floor), Sector-3, Noida 201301 (India)
t: +91 8447 227337 | e: info@innovationm.com
| Build a Mobile Experience

www.innovationm.com

1. UIImage object.
2. Compress ratio (It can be between 0.0 and 1.0)
This method will return NSData representation of image after compressing.
Example:
Original source Image Size = (2448, 3264)
Original source image file size = 3.8 MB
After compressing image file size by 0.5:
Resized source Image Size = (2448, 3264)
Resized source image file size = 534 KB
Code Example:
- (UIImage *) compressImagebyRatio:(float)compressRatio forImage:(UIImage *)sourceImage
{
UIImage *generatedImage = nil;
NSData *data = UIImageJPEGRepresentation(sourceImage,compressRatio);
generatedImage = [[UIImage alloc] initWithData:data];
return generatedImage;
}

Depending upon your requirement whether to reduce the size (width and height in
pixels) OR reduce the file size OR Both, you may apply the above.

Source: http://blogs.innovationm.com/image-handling-in-ios/

Corporate Office:
InnovationM Mobile Technologies
E-3 (Ground Floor), Sector-3, Noida 201301 (India)
t: +91 8447 227337 | e: info@innovationm.com

Weitere ähnliche Inhalte

Andere mochten auch

12-Qualification-B
12-Qualification-B12-Qualification-B
12-Qualification-BSocheata Oum
 
Токбатырова Несыпгуль+ Наша большая юрта+ Предприниматели
Токбатырова Несыпгуль+ Наша большая юрта+ ПредпринимателиТокбатырова Несыпгуль+ Наша большая юрта+ Предприниматели
Токбатырова Несыпгуль+ Наша большая юрта+ ПредпринимателиЖанна Альжанова
 
Presentación power point los colores
Presentación power point   los coloresPresentación power point   los colores
Presentación power point los coloresCarol de la Plaza
 
Liderazgo y habilidades de comunicación
Liderazgo y habilidades de comunicación Liderazgo y habilidades de comunicación
Liderazgo y habilidades de comunicación José Luis López
 
H3 104 s
H3 104 sH3 104 s
H3 104 sEmaser
 
Colorpainter W64s
Colorpainter W64sColorpainter W64s
Colorpainter W64sEmaser
 
Habilidades comunicativas
Habilidades comunicativasHabilidades comunicativas
Habilidades comunicativaslaurasalaza31
 
Lentera news ed. #21 Januari 2016
Lentera news  ed. #21 Januari 2016Lentera news  ed. #21 Januari 2016
Lentera news ed. #21 Januari 2016Ananta Bangun
 
Lentera news - mei 2016
Lentera news  - mei 2016Lentera news  - mei 2016
Lentera news - mei 2016Ananta Bangun
 

Andere mochten auch (10)

12-Qualification-B
12-Qualification-B12-Qualification-B
12-Qualification-B
 
Токбатырова Несыпгуль+ Наша большая юрта+ Предприниматели
Токбатырова Несыпгуль+ Наша большая юрта+ ПредпринимателиТокбатырова Несыпгуль+ Наша большая юрта+ Предприниматели
Токбатырова Несыпгуль+ Наша большая юрта+ Предприниматели
 
THE_SHELL_ISSUE_4
THE_SHELL_ISSUE_4THE_SHELL_ISSUE_4
THE_SHELL_ISSUE_4
 
Presentación power point los colores
Presentación power point   los coloresPresentación power point   los colores
Presentación power point los colores
 
Liderazgo y habilidades de comunicación
Liderazgo y habilidades de comunicación Liderazgo y habilidades de comunicación
Liderazgo y habilidades de comunicación
 
H3 104 s
H3 104 sH3 104 s
H3 104 s
 
Colorpainter W64s
Colorpainter W64sColorpainter W64s
Colorpainter W64s
 
Habilidades comunicativas
Habilidades comunicativasHabilidades comunicativas
Habilidades comunicativas
 
Lentera news ed. #21 Januari 2016
Lentera news  ed. #21 Januari 2016Lentera news  ed. #21 Januari 2016
Lentera news ed. #21 Januari 2016
 
Lentera news - mei 2016
Lentera news  - mei 2016Lentera news  - mei 2016
Lentera news - mei 2016
 

Ähnlich wie Handle Images in iOS Apps

Inception V3 Image Processing .pptx
Inception V3 Image Processing .pptxInception V3 Image Processing .pptx
Inception V3 Image Processing .pptxMahmoudMohamedAbdelb
 
Inception V3 Image Processing (1).pptx
Inception V3 Image Processing (1).pptxInception V3 Image Processing (1).pptx
Inception V3 Image Processing (1).pptxMahmoudMohamedAbdelb
 
Better DITA Graphics for a Multi-Screen World
Better DITA Graphics for a Multi-Screen WorldBetter DITA Graphics for a Multi-Screen World
Better DITA Graphics for a Multi-Screen WorldJoe Pairman
 
Python media library
Python media libraryPython media library
Python media libraryRaginiJain21
 
Jetpack Compose beginner.pdf
Jetpack Compose beginner.pdfJetpack Compose beginner.pdf
Jetpack Compose beginner.pdfAayushmaAgrawal
 
Word press gets responsive 4x3
Word press gets responsive 4x3Word press gets responsive 4x3
Word press gets responsive 4x3Edmund Turbin
 
Building Next Generation Websites Session 7 by Muhammad Ehtisham Siddiqui
Building Next Generation  Websites Session 7 by Muhammad Ehtisham SiddiquiBuilding Next Generation  Websites Session 7 by Muhammad Ehtisham Siddiqui
Building Next Generation Websites Session 7 by Muhammad Ehtisham SiddiquiMuhammad Ehtisham Siddiqui
 
Image_Processing_LECTURE_c#_programming.ppt
Image_Processing_LECTURE_c#_programming.pptImage_Processing_LECTURE_c#_programming.ppt
Image_Processing_LECTURE_c#_programming.pptLOUISSEVERINOROMANO
 
Top Tips for Android UIs - Getting the Magic on Tablets
Top Tips for Android UIs - Getting the Magic on TabletsTop Tips for Android UIs - Getting the Magic on Tablets
Top Tips for Android UIs - Getting the Magic on TabletsMotorola Mobility - MOTODEV
 
How to Create Animation Using the AnimatedAlign Widget.pptx
How to Create Animation Using the AnimatedAlign Widget.pptxHow to Create Animation Using the AnimatedAlign Widget.pptx
How to Create Animation Using the AnimatedAlign Widget.pptxFlutter Agency
 
Paper id 28201429
Paper id 28201429Paper id 28201429
Paper id 28201429IJRAT
 
Harnessing Artificial Intelligence in your Applications - Level 300
Harnessing Artificial Intelligence in your Applications - Level 300Harnessing Artificial Intelligence in your Applications - Level 300
Harnessing Artificial Intelligence in your Applications - Level 300Amazon Web Services
 
IRJET- Implementation of Privacy Preserving Content based Image Retrieval in ...
IRJET- Implementation of Privacy Preserving Content based Image Retrieval in ...IRJET- Implementation of Privacy Preserving Content based Image Retrieval in ...
IRJET- Implementation of Privacy Preserving Content based Image Retrieval in ...IRJET Journal
 
Optimize Images for SEO WordCamp Sacramento
Optimize Images for SEO WordCamp SacramentoOptimize Images for SEO WordCamp Sacramento
Optimize Images for SEO WordCamp SacramentoLeslie Staller
 

Ähnlich wie Handle Images in iOS Apps (20)

Inception V3 Image Processing .pptx
Inception V3 Image Processing .pptxInception V3 Image Processing .pptx
Inception V3 Image Processing .pptx
 
Inception V3 Image Processing (1).pptx
Inception V3 Image Processing (1).pptxInception V3 Image Processing (1).pptx
Inception V3 Image Processing (1).pptx
 
Better DITA Graphics for a Multi-Screen World
Better DITA Graphics for a Multi-Screen WorldBetter DITA Graphics for a Multi-Screen World
Better DITA Graphics for a Multi-Screen World
 
Topic 1_PPT.pptx
Topic 1_PPT.pptxTopic 1_PPT.pptx
Topic 1_PPT.pptx
 
M14 overview
M14 overviewM14 overview
M14 overview
 
Image inpainting
Image inpaintingImage inpainting
Image inpainting
 
Python media library
Python media libraryPython media library
Python media library
 
Jetpack Compose beginner.pdf
Jetpack Compose beginner.pdfJetpack Compose beginner.pdf
Jetpack Compose beginner.pdf
 
Word press gets responsive 4x3
Word press gets responsive 4x3Word press gets responsive 4x3
Word press gets responsive 4x3
 
Building Next Generation Websites Session 7 by Muhammad Ehtisham Siddiqui
Building Next Generation  Websites Session 7 by Muhammad Ehtisham SiddiquiBuilding Next Generation  Websites Session 7 by Muhammad Ehtisham Siddiqui
Building Next Generation Websites Session 7 by Muhammad Ehtisham Siddiqui
 
Image_Processing_LECTURE_c#_programming.ppt
Image_Processing_LECTURE_c#_programming.pptImage_Processing_LECTURE_c#_programming.ppt
Image_Processing_LECTURE_c#_programming.ppt
 
Resize image vb.net
Resize image vb.netResize image vb.net
Resize image vb.net
 
Top Tips for Android UIs - Getting the Magic on Tablets
Top Tips for Android UIs - Getting the Magic on TabletsTop Tips for Android UIs - Getting the Magic on Tablets
Top Tips for Android UIs - Getting the Magic on Tablets
 
How to Create Animation Using the AnimatedAlign Widget.pptx
How to Create Animation Using the AnimatedAlign Widget.pptxHow to Create Animation Using the AnimatedAlign Widget.pptx
How to Create Animation Using the AnimatedAlign Widget.pptx
 
C43011518
C43011518C43011518
C43011518
 
Paper id 28201429
Paper id 28201429Paper id 28201429
Paper id 28201429
 
Harnessing Artificial Intelligence in your Applications - Level 300
Harnessing Artificial Intelligence in your Applications - Level 300Harnessing Artificial Intelligence in your Applications - Level 300
Harnessing Artificial Intelligence in your Applications - Level 300
 
IRJET- Implementation of Privacy Preserving Content based Image Retrieval in ...
IRJET- Implementation of Privacy Preserving Content based Image Retrieval in ...IRJET- Implementation of Privacy Preserving Content based Image Retrieval in ...
IRJET- Implementation of Privacy Preserving Content based Image Retrieval in ...
 
Image processing application
Image processing applicationImage processing application
Image processing application
 
Optimize Images for SEO WordCamp Sacramento
Optimize Images for SEO WordCamp SacramentoOptimize Images for SEO WordCamp Sacramento
Optimize Images for SEO WordCamp Sacramento
 

Mehr von InnovationM

How to use data binding in android
How to use data binding in androidHow to use data binding in android
How to use data binding in androidInnovationM
 
Capture image on eye blink
Capture image on eye blinkCapture image on eye blink
Capture image on eye blinkInnovationM
 
How to use geolocation in react native apps
How to use geolocation in react native appsHow to use geolocation in react native apps
How to use geolocation in react native appsInnovationM
 
Android 8 behavior changes
Android 8 behavior changesAndroid 8 behavior changes
Android 8 behavior changesInnovationM
 
Understanding of react fiber architecture
Understanding of react fiber architectureUnderstanding of react fiber architecture
Understanding of react fiber architectureInnovationM
 
Automatic reference counting (arc) and memory management in swift
Automatic reference counting (arc) and memory management in swiftAutomatic reference counting (arc) and memory management in swift
Automatic reference counting (arc) and memory management in swiftInnovationM
 
Firebase crashlytics integration in iOS swift (dSYM File Required Problem Res...
Firebase crashlytics integration in iOS swift (dSYM File Required Problem Res...Firebase crashlytics integration in iOS swift (dSYM File Required Problem Res...
Firebase crashlytics integration in iOS swift (dSYM File Required Problem Res...InnovationM
 
How prototype works in java script?
How prototype works in java script?How prototype works in java script?
How prototype works in java script?InnovationM
 
React – Let’s “Hook” up
React – Let’s “Hook” upReact – Let’s “Hook” up
React – Let’s “Hook” upInnovationM
 
Razorpay Payment Gateway Integration In iOS Swift
Razorpay Payment Gateway Integration In iOS SwiftRazorpay Payment Gateway Integration In iOS Swift
Razorpay Payment Gateway Integration In iOS SwiftInnovationM
 
Paytm integration in swift
Paytm integration in swiftPaytm integration in swift
Paytm integration in swiftInnovationM
 
Line Messaging API Integration with Spring-Boot
Line Messaging API Integration with Spring-BootLine Messaging API Integration with Spring-Boot
Line Messaging API Integration with Spring-BootInnovationM
 
Basic fundamental of ReactJS
Basic fundamental of ReactJSBasic fundamental of ReactJS
Basic fundamental of ReactJSInnovationM
 
Basic Fundamental of Redux
Basic Fundamental of ReduxBasic Fundamental of Redux
Basic Fundamental of ReduxInnovationM
 
Integration of Highcharts with React ( JavaScript library )
Integration of Highcharts with React ( JavaScript library )Integration of Highcharts with React ( JavaScript library )
Integration of Highcharts with React ( JavaScript library )InnovationM
 
Serialization & De-serialization in Java
Serialization & De-serialization in JavaSerialization & De-serialization in Java
Serialization & De-serialization in JavaInnovationM
 
Concept of Stream API Java 1.8
Concept of Stream API Java 1.8Concept of Stream API Java 1.8
Concept of Stream API Java 1.8InnovationM
 
How to Make Each Round of Testing Count?
How to Make Each Round of Testing Count?How to Make Each Round of Testing Count?
How to Make Each Round of Testing Count?InnovationM
 
Model View Presenter For Android
Model View Presenter For AndroidModel View Presenter For Android
Model View Presenter For AndroidInnovationM
 

Mehr von InnovationM (20)

How to use data binding in android
How to use data binding in androidHow to use data binding in android
How to use data binding in android
 
Capture image on eye blink
Capture image on eye blinkCapture image on eye blink
Capture image on eye blink
 
Mob x in react
Mob x in reactMob x in react
Mob x in react
 
How to use geolocation in react native apps
How to use geolocation in react native appsHow to use geolocation in react native apps
How to use geolocation in react native apps
 
Android 8 behavior changes
Android 8 behavior changesAndroid 8 behavior changes
Android 8 behavior changes
 
Understanding of react fiber architecture
Understanding of react fiber architectureUnderstanding of react fiber architecture
Understanding of react fiber architecture
 
Automatic reference counting (arc) and memory management in swift
Automatic reference counting (arc) and memory management in swiftAutomatic reference counting (arc) and memory management in swift
Automatic reference counting (arc) and memory management in swift
 
Firebase crashlytics integration in iOS swift (dSYM File Required Problem Res...
Firebase crashlytics integration in iOS swift (dSYM File Required Problem Res...Firebase crashlytics integration in iOS swift (dSYM File Required Problem Res...
Firebase crashlytics integration in iOS swift (dSYM File Required Problem Res...
 
How prototype works in java script?
How prototype works in java script?How prototype works in java script?
How prototype works in java script?
 
React – Let’s “Hook” up
React – Let’s “Hook” upReact – Let’s “Hook” up
React – Let’s “Hook” up
 
Razorpay Payment Gateway Integration In iOS Swift
Razorpay Payment Gateway Integration In iOS SwiftRazorpay Payment Gateway Integration In iOS Swift
Razorpay Payment Gateway Integration In iOS Swift
 
Paytm integration in swift
Paytm integration in swiftPaytm integration in swift
Paytm integration in swift
 
Line Messaging API Integration with Spring-Boot
Line Messaging API Integration with Spring-BootLine Messaging API Integration with Spring-Boot
Line Messaging API Integration with Spring-Boot
 
Basic fundamental of ReactJS
Basic fundamental of ReactJSBasic fundamental of ReactJS
Basic fundamental of ReactJS
 
Basic Fundamental of Redux
Basic Fundamental of ReduxBasic Fundamental of Redux
Basic Fundamental of Redux
 
Integration of Highcharts with React ( JavaScript library )
Integration of Highcharts with React ( JavaScript library )Integration of Highcharts with React ( JavaScript library )
Integration of Highcharts with React ( JavaScript library )
 
Serialization & De-serialization in Java
Serialization & De-serialization in JavaSerialization & De-serialization in Java
Serialization & De-serialization in Java
 
Concept of Stream API Java 1.8
Concept of Stream API Java 1.8Concept of Stream API Java 1.8
Concept of Stream API Java 1.8
 
How to Make Each Round of Testing Count?
How to Make Each Round of Testing Count?How to Make Each Round of Testing Count?
How to Make Each Round of Testing Count?
 
Model View Presenter For Android
Model View Presenter For AndroidModel View Presenter For Android
Model View Presenter For Android
 

Kürzlich hochgeladen

Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for PartnersEnhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for PartnersThousandEyes
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024Rafal Los
 
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...HostedbyConfluent
 
Key Features Of Token Development (1).pptx
Key  Features Of Token  Development (1).pptxKey  Features Of Token  Development (1).pptx
Key Features Of Token Development (1).pptxLBM Solutions
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking MenDelhi Call girls
 
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | DelhiFULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhisoniya singh
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreternaman860154
 
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...Neo4j
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationRadu Cotescu
 
Pigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food ManufacturingPigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food ManufacturingPigging Solutions
 
AI as an Interface for Commercial Buildings
AI as an Interface for Commercial BuildingsAI as an Interface for Commercial Buildings
AI as an Interface for Commercial BuildingsMemoori
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonetsnaman860154
 
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxFactors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxKatpro Technologies
 
Azure Monitor & Application Insight to monitor Infrastructure & Application
Azure Monitor & Application Insight to monitor Infrastructure & ApplicationAzure Monitor & Application Insight to monitor Infrastructure & Application
Azure Monitor & Application Insight to monitor Infrastructure & ApplicationAndikSusilo4
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking MenDelhi Call girls
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slidespraypatel2
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking MenDelhi Call girls
 
Benefits Of Flutter Compared To Other Frameworks
Benefits Of Flutter Compared To Other FrameworksBenefits Of Flutter Compared To Other Frameworks
Benefits Of Flutter Compared To Other FrameworksSoftradix Technologies
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsMark Billinghurst
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptxHampshireHUG
 

Kürzlich hochgeladen (20)

Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for PartnersEnhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
 
Key Features Of Token Development (1).pptx
Key  Features Of Token  Development (1).pptxKey  Features Of Token  Development (1).pptx
Key Features Of Token Development (1).pptx
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
 
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | DelhiFULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
 
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
Pigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food ManufacturingPigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food Manufacturing
 
AI as an Interface for Commercial Buildings
AI as an Interface for Commercial BuildingsAI as an Interface for Commercial Buildings
AI as an Interface for Commercial Buildings
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
 
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxFactors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
 
Azure Monitor & Application Insight to monitor Infrastructure & Application
Azure Monitor & Application Insight to monitor Infrastructure & ApplicationAzure Monitor & Application Insight to monitor Infrastructure & Application
Azure Monitor & Application Insight to monitor Infrastructure & Application
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slides
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
 
Benefits Of Flutter Compared To Other Frameworks
Benefits Of Flutter Compared To Other FrameworksBenefits Of Flutter Compared To Other Frameworks
Benefits Of Flutter Compared To Other Frameworks
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR Systems
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 

Handle Images in iOS Apps

  • 1. | Build a Mobile Experience Image Handling in iOS Corporate Office: InnovationM Mobile Technologies E-3 (Ground Floor), Sector-3, Noida 201301 (India) t: +91 8447 227337 | e: info@innovationm.com www.innovationm.com
  • 2. | Build a Mobile Experience www.innovationm.com Image Handling in iOS When we use images in our application then we face different type of scenarios while handling the image. Before we go into the scenarios / situations of image handling in Application, let us understand the concept of UIImage and UIImageView. Concept of UIImage and UIImageView (container) UIImage - Bitmap with different formats Ex png and jpeg. Recommended format is png. UIImageView – This is an iOS Widget that acts like a container for holding the image. To hold the image, UIImageView is required. When UIImage is shown in UIImageView, there is a property (Content Mode) of UIImageView, that render the Image in UIImageView. We mostly use three types of Content Mode property. These are:  Scale To Fill  Aspect Fit  Aspect Fill How this Content Mode renders the image we can see by following examples  UIImage of size (100×150)  UIImageView of size (200×200) Corporate Office: InnovationM Mobile Technologies E-3 (Ground Floor), Sector-3, Noida 201301 (India) t: +91 8447 227337 | e: info@innovationm.com
  • 3. | Build a Mobile Experience www.innovationm.com Different Content modes for placing Image in ImageView 1. Scale to Fill In this case, content is scaled to fill in ImageView with distorted or same aspect ratio. If the image aspect ratio is different than that of container then final image ratio when fitted in the container will be different and hence the image is finally distorted. (Aspect Ratio is Width / Height) 2. Aspect Fit In this case, content is scaled to fit in ImageView (container) without changing the aspect ratio of image. Remainder is transparent. Corporate Office: InnovationM Mobile Technologies E-3 (Ground Floor), Sector-3, Noida 201301 (India) t: +91 8447 227337 | e: info@innovationm.com
  • 4. | Build a Mobile Experience www.innovationm.com 3. Aspect Fill without Clipping In this case, image is scaled to fill in ImageView. Aspect ratio of image is not changed. 4. Aspect Fill with Clipping In this case, content is scaled to fill in ImageView the same way it happen in the above case but then finally image is cropped to the exact size of the ImageView size. Corporate Office: InnovationM Mobile Technologies E-3 (Ground Floor), Sector-3, Noida 201301 (India) t: +91 8447 227337 | e: info@innovationm.com
  • 5. | Build a Mobile Experience www.innovationm.com Calculating new width and height with maintaining aspect ratio Image original width = 100 and height = 150 Container width = 200 and height = 200 x-ratio = Container width / Image original width = 200/100 = 2.0 y-ratio = Container height / Image original height = 200/ 150 = 1.33 Selected ratio = min (x-ratio, y-ratio) = 1.33 Final Image width = Image original width * Selected Ratio = 100 * 1.33 = 133 Final Image height = Image original height * Selected Ratio = 150 * 1.33 = 200 Final Image width x height = 133 x 200 (Original width x height of image was 100 x 150) Showing Images coming from Server (Different Scenarios) We can use Aspect Fit mode for all the scenarios. It will serve in every scenario if you don’t want to distort image. Scenario 1 Image width is lesser than Container width. Image height is lesser than Container height Image width = 100 and height = 150 UIImageView width = 200 and height = 200 Final Image width = 133 and height = 200 (Refer the calculations above) Image is scaled up to fit the container. Corporate Office: InnovationM Mobile Technologies E-3 (Ground Floor), Sector-3, Noida 201301 (India) t: +91 8447 227337 | e: info@innovationm.com
  • 6. | Build a Mobile Experience Scenario 2 Image width is greater than Container width. Image height is lesser than Container height Image width = 100 and height = 150 UIImageView width = 80 and height = 200 Final Image width = 80 and height = 122 Image is scaled down to fit the container. Scenario 3 Image width is lesser than Container width. Image height is greater than Container height. Image width = 100 and height = 150 UIImageView width = 200 and height = 120 Final width = 80 and height = 120 Image is scaled down to fit the container. Scenario 4 Image width is greater than Container width. Image height is greater than Container height. Image width = 100 and height = 150 UIImageView width = 80 and height = 100 Final width = 66 and height = 100 Image is scaled down to fit the container. Corporate Office: InnovationM Mobile Technologies E-3 (Ground Floor), Sector-3, Noida 201301 (India) t: +91 8447 227337 | e: info@innovationm.com www.innovationm.com
  • 7. | Build a Mobile Experience Scenario 5 (Same Aspect Ratio of Image and ImageView) Image width is greater than Container width. Image height is greater than Container height. Image width = 100 and height = 150 UIImageView width = 80 and height = 120 Final width = 80 and height = 120 Image is scaled down to fit the container. Scenario 6 (Same Aspect Ratio of Image and ImageView) Image width is lesser than Container width. Image height is lesser than Container height. Image width = 100 and height = 150 UIImageView width = 120 and height = 180 Final width = 120 and height = 180 Image is scaled up to fit the container. How we change the image size and compress image file size. Corporate Office: InnovationM Mobile Technologies E-3 (Ground Floor), Sector-3, Noida 201301 (India) t: +91 8447 227337 | e: info@innovationm.com www.innovationm.com
  • 8. | Build a Mobile Experience www.innovationm.com Uploading Images to the Server (Different Scenarios) Many times we have to upload images in an application from device (iPhone, iPad) to the server. It could be a photo clicked from the camera or there was an old image that we choose and upload from the application. Before uploading we can do two things with the image: 1. Change the width and height of original image. 2. Compress the image to be of smaller file size. Let us understand them. 1. Change the width and height of original image. To resize the image, we have to configure the drawing environment for rendering into a bitmap. 1# UIGraphicsBeginImageContextWithOptions() method is used to create the bitmapbased graphics context. This method takes two parameters: 1. Size of image (changed size) and 2. Scale factor of device as parameter. Scale factor for Normal Display = 1.0 Scale factor for Retina Display = 2.0 2# – (void) drawInRect:(CGRect)rect; method is used to draw the image in target rectangle. Corporate Office: InnovationM Mobile Technologies E-3 (Ground Floor), Sector-3, Noida 201301 (India) t: +91 8447 227337 | e: info@innovationm.com
  • 9. | Build a Mobile Experience www.innovationm.com 3# UIGraphicsGetImageFromCurrentImageContext() method is used to get the resized image from drawing environment. 4# UIGraphicsEndImageContext() method is used to clean up the bitmap drawing environment and remove the graphics context from the top of the context stack. Example: Original source Image Size = (2448, 3264) Original source image file size = 3.8 MB After resizing image to size (1024,768): Resized source Image Size = (1024,768) Resized source image file size = 2.0 MB Code Example: - (UIImage *) imageByScalingToSize:(CGSize)targetSize forImage:(UIImage *)sourceImage { UIImage *generatedImage = nil; UIGraphicsBeginImageContextWithOptions(targetSize,NO,2.0); [sourceImage drawInRect:CGRectMake(0, 0,targetSize.width,targetSize.height)]; generatedImage = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); return generatedImage; } 2. Compress the image to be of smaller file size. We can compress the image file size by following method. UIImageJPEGRepresentation() This method takes two parameter Corporate Office: InnovationM Mobile Technologies E-3 (Ground Floor), Sector-3, Noida 201301 (India) t: +91 8447 227337 | e: info@innovationm.com
  • 10. | Build a Mobile Experience www.innovationm.com 1. UIImage object. 2. Compress ratio (It can be between 0.0 and 1.0) This method will return NSData representation of image after compressing. Example: Original source Image Size = (2448, 3264) Original source image file size = 3.8 MB After compressing image file size by 0.5: Resized source Image Size = (2448, 3264) Resized source image file size = 534 KB Code Example: - (UIImage *) compressImagebyRatio:(float)compressRatio forImage:(UIImage *)sourceImage { UIImage *generatedImage = nil; NSData *data = UIImageJPEGRepresentation(sourceImage,compressRatio); generatedImage = [[UIImage alloc] initWithData:data]; return generatedImage; } Depending upon your requirement whether to reduce the size (width and height in pixels) OR reduce the file size OR Both, you may apply the above. Source: http://blogs.innovationm.com/image-handling-in-ios/ Corporate Office: InnovationM Mobile Technologies E-3 (Ground Floor), Sector-3, Noida 201301 (India) t: +91 8447 227337 | e: info@innovationm.com