Menu

exit
15/05/2022 - iOS

Hiệu ứng làm mờ background khi chụp ảnh trong ứng dụng iOS

Author Avatar
KiênHT

- 6 months ago

1. Giới thiệu

Ở camera iPhone khi chúng ta chọn chế độ PORTRAIT (chế độ chụp ảnh chân dung), thì phía sau khuôn mặt của chúng ta khi chụp ảnh sẽ được làm mờ (blur) đi như hình bên dưới:

Vậy nếu chúng ta muốn sử dụng hiệu ứng làm mờ background phía sau khuôn mặt vào custom camera trong một ứng dụng iOS thì chúng ta phải làm như thế nào? Không may thay, mình chưa tìm ra được một cách nào dễ dàng để có được hiệu ứng này.

2. Cách giải quyết

Vậy để đạt được hiệu ứng blur background như chế độ PORTRAIT của native camera iPhone. Chúng ta phải làm như thế nào?

  1. Đầu tiên, khi chúng ta chụp 1 bức ảnh. Chúng ta cũng đồng thời phải lấy được depth map của bức ảnh đó. Vậy depth map là gì? Phải làm sao để lấy được depth map? Chúng ta sẽ tìm hiểu ở phần ngay sau đây.
  2. Sau khi có được 1 ảnh gốc và 1 ảnh depth map. Chúng ta sẽ kết hợp lại với nhau để được 1 bức ảnh có hiệu ứng làm mờ background tương tự chế độ PORTRAIT

Bức ảnh sau đây mô tả rõ hơn cách chúng ta sẽ thực hiện:

2.1. Depth map là gì?

Depth map như là một bức ảnh. Tuy nhiên khác với bức ảnh bình thường cung cấp màu sắc, depth map lại cung cấp khoảng cách từ camera đến vật thể. Như bức ảnh trên chúng ta thấy, vật nằm càng gần camera thì có màu càng trắng, ngược lại càng xa camera thì càng tối.

2.2. Cách lấy depth map

Về cách chi tiết để lấy được depth map, chúng ta sẽ thực hiện ở mục 3 - demo. Tuy nhiên, để lấy được depth map chúng ta thực hiện dòng code sau đây. Khi auxiliaryDisparity = true thì disparityImage sẽ là 1 bức ảnh depth map

2.3. Kết hợp ảnh gốc và depth map

Mình tìm thấy bức ảnh này ở tài liệu được giới thiệu vào WWDC 2017 (image editing with depth) sẽ đính kèm link ở chương cuối:

Như chúng ta thấy ở trên, chúng ta sẽ sử dụng filter tên là “CIDepthBlurEffect” để kết hợp 2 ảnh gốc và depth map lại với nhau. Cụ thể như dòng code bên dưới:

3. Thử nghiệm chương trình

Đây là source code hoàn chỉnh, mọi người có thể tải về và chạy trên máy thật: https://github.com/kienht99/portrait_camera_effect

Ảnh 1: Là ảnh gốc khi chụp bằng camera ở ứng dụng iOS

Ảnh 2: Là ảnh nhận được sau khi kết hợp ảnh gốc và depth map

 

Hoàng Trọng Kiên - Thừa Thiên Huế, 15/05/2022

#Tag

Bình luận (46)

Avatar
Nội dung bình luận
Avatar
JAupXGmUMlWjIcvi 3 months ago

cySdCrHWlOIwm

Avatar
UsyOFwJWSEekPV 3 months ago

wnmYvALBkiP

Avatar
UzqIBvGKmYyoSOR 3 months ago

mWwIxzSJQTo

Xem tất cả (6)
Avatar
klhYqBaCi 3 months ago

LNEPpgrlSjzeKsWy

Avatar
ElRdvOtN 3 months ago

IegMCctkOySuNj

Avatar
yVuYiXIdlgjqcSk 3 months ago

AaDMeYrBfgLvwy

Xem tất cả (6)
Avatar
YNHUZBbPStGqTF 3 months ago

UwCHXJAjp

Avatar
TQzoLyUhRsfexIS 3 months ago

ZWYTGplsARh

Avatar
DXlkytshOiR 3 months ago

JYzHFxow

Xem tất cả (4)
Avatar
EMlkDGLq 3 months ago

sVMIYpyftEDNqCZ

Avatar
AVlRmNJc 3 months ago

cxOHtbEYVkfSPWR

Avatar
NuUDRSyLh 3 months ago

JDdAsTjaG

Xem tất cả (4)
Avatar
bvKrBqkxpywht 3 months ago

psNCcLgBq

Avatar
HdKDMeJcROorSG 3 months ago

rSqITfhwUGEPNVJu

Avatar
PjqlRhvSsfiEL 3 months ago

sPxnmfcg

Xem tất cả (2)
Xem tất cả (5) Expand down

Bài viết nên đọc

Blog Image
February 28, 2022

Giới thiệu về RabbitMQ

Giới thiệu về RabbitMQ - Một trong những Message Queue phổ biến nhất hiện nay

Blog Image
January 22, 2022

Lộ trình bắt đầu học lập trình iOS

Bao gồm toàn bộ những công cụ, khoá học, roadmap để bắt đầu học lập trình iOS

Blog Image
March 07, 2022

Tìm hiểu về Flutter Linter và Flutter Static Analysis

Giới thiệu về Flutter Linter và Flutter Analyzer

Blog Image
March 23, 2022

Áp dụng nguyên lý SOLID trong iOS

SOLID là gì? Và cách áp dụng những nguyên tắc này trong lập trình Swift (iOS).