Publication Repository 7.C. Pickerling

DINAMIKA TEKNOLOGI April 2017 Vol. 9; No. 1; Hal. 27-31

WEBSITE PERANCANGAN SCRAPBOOK DENGAN PEMOTONGAN
GAMBAR OTOMATIS
C. Pickerling
Teknik Informatika,Sekolah Tinggi Teknik Surabaya
e-mail: pickerling@stts.edu

ABSTRAK
Scrapbook merupakan salah satu kegemaran yang saat ini sedang diminati oleh kalangan masyarakat.
Namun seringkali tidak semua orang dapat membayangkan untuk membuat suatu karya sesuai dengan
keinginannya tanpa melihat contoh atau membuat sendiri. Sering kali seseorang harus membeli bahanbahan scrap terlebih dahulu dan kemudian mencobanya, jika tidak sesuai dengan seleranya maka barang
yang sebelumnya telah dibeli tidak akan digunakan lagi dan mengakibatkan seseorang harus
mengeluarkan biaya yang cukup besar untuk membelanjakan barang-barang yang seharusnya tidak
diperlukan. Selain untuk menyediakan layanan penjualan barang-barang scrapbook, aplikasi ini juga
digunakan untuk mendesain scrapbook sesuai keinginan customer dengan menggunakan barang-barang
yang telah dibeli sebelumnya. Penerapan Algoritma Segmentasi Image digunakan untuk proses
pemotongan sebuah image menjadi beberapa objek sehingga dapat mendukung pembuatan aplikasi ini
dalam mendesain scrapbook secara custom.
Kata kunci: image segmentation, grayscale, noise reduction, bilevel, noise removal


PENDAHULUAN
Seiring dengan berkembangnya kebiasaan
seseorang dalam mengumpulkan dan menyimpan
foto, data atau barang-barang yang berkesan untuk
menjadi suatu kenang-kenangan, maka muncul
seni scrapbook. Seni scrapbook merupakan seni
menempel foto, atau gambar dimedia kertas dan
menghiasnya hingga menjadi suatu karya kreatif.
Selain itu seni scrapbook juga merupakan
perpaduan warna, motif, dan bentuk untuk
menghasilkan karya-karya yang indah, sehingga
diperlukan suatu keahlian untuk membuatnya dan
tidak semua orang dapat menikmati kegemaran
dalam membuat dan mendesain scrapbook.
Saat ini telah banyak tersedia online shop yang
menyediakan layanan penjualan bahan-bahan scrap
dan scrapbook yang telah siap digunakan. Sering
kali seseorang harus membeli bahan-bahan scrap
terlebih dahulu dan kemudian mencobanya, jika
tidak sesuai dengan seleranya maka bahan-bahan

yang sebelumnya telah dibeli tidak akan digunakan
lagi dan mengakibatkan seseorang harus
mengeluarkan biaya yang cukup besar untuk
membelanjakan bahan-bahan yang seharusnya
tidak diperlukan.

Dengan adanya fitur untuk mendesain secara
custom, maka mempermudah seseorang dalam
mengimajinasikan hasil karya scrapbook seperti
yang diinginkannya. Hingga saat ini aplikasi yang
dapat mendesain scrapbook saatlah minimal. Oleh
karena itu, penulis memanfaatkan kesempatan
tersebut untuk membuat aplikasi yang mudah
digunakan untuk mendesain scrapbook secara
custom dan juga sebagai jasa untuk membuatkan
scrapbook.
Untuk mendesain scrapbook secara custom
maka diperlukan penerapan algoritma segmentasi
image. Segmentasi Image digunakan untuk proses
pemotongan sebuah image menjadi beberapa objek

sehingga dapat mendukung pembuatan aplikasi ini
dalam mendesain scrapbook secara custom.

DESAIN SISTEM
Pada bagian ini akan dijelaskan mengenai cara
kerja sistem perancangan scrapbook ini. User
dibagi menjadi 2 macam, yaitu admin dan
customer.
Admin bertugas untuk melakukan
upload berbagai bahan untuk menunjang
perancangan scrapbook, sedangkan Customer
merupakan pengunjung website yang akan
melakukan pembelian barang pada umumnya.

Dinamika Teknologi
έψιφ φχσι νυψωφωοσ μιψ νυιιήι Γ Β

27

DINAMIKA TEKNOLOGI April 2017 Vol. 9; No. 1; Hal. 27-31


material yang terdapat pada shopping cart akan
disimpan untuk proses layout scrap. Seluruh
material yang dibeli akan dikategorikan
berdasarkan
jenis
materialnya
sehingga
memudahkan
customer
untuk
merancang
scrapbook yang diinginkan. Customer dapat
melakukan peletakkan setiap gambar berdasarkan
posisi layer seperti gambar di bawah ini.

Gambar 1. Arsitektur Sistem
Pertama-tama admin akan melakukan upload
barang-barang yang ready stock. Material atau
bahan yang dijual dapat berupa card stock, kertas

bermotif, stiker, frame, pita, font dies, kancing dan
lain-lain. Selain upload gambar material yang akan
dijual, pada website ini juga terdapat proses untuk
melakukan pemotongan image pada kertas
bermotif ataupun stiker seperti gambar berikut ini.

Gambar 3. Penataan Layout Scrapbook
Setelah perancangan scrapbook selesai, maka
customer dapat lanjut ketahap berikutnya, yaitu
melihat view dari scrapbook yang telah dirancang.
Jika layout tersebut sudah sesuai maka akan masuk
pada proses pembayaran. Pada proses pembayaran
akan diperhitungkan seluruh material yang telah
dibeli, ongkos kirim serta ongkos jasa pembuatan
scrapbook. Konfirmasi email akan dikirimkan ke
customer saat pembayaran telah dilakukan dan
barang (scrapbook yang telah jadi) akan siap
dikirimkan.

PEMOTONGAN IMAGE

MENGGUNAKAN ALGORITMA
SEGMENTASI IMAGE

Gambar 2. Proses Pemotongan Gambar
Pemotongan image dimaksudkan agar customer
yang memilih kertas bermotif tersebut dapat
menghias sesuai dengan keinginannya. Seluruh
potongan yang telah diproses akan disimpan secara
terpisah dalam database sehingga mempermudah
customer untuk menghias scrapbooknya.
Dari sisi customer, pertama kali customer dapat
mengunjungi website scrapbook ini terlebih
dahulu. Customer memilih seluruh material yang
diinginkan untuk dimasukkan ke shopping cart.
Setelah melakukan pembelian material, maka

28

Pada bagian ini dijelaskan mengenai cara
pemotongan image dimana tujuannya adalah

memisahkan sebuah image utuh yang berisikan
banyak objek scrapbook menjadi sebuah image
untuk masing-masing objek. Misal seperti pada
gambar 2, terdapat sebuah image dengan 17 objek
didalamnya (9 kucing dan 8 hati) maka akan
dipisahkan dimana per objeknya akan menjadi
sebuah image tersendiri dan terdapat 17 image.

Dinamika Teknologi
έψιφ φχσι νυψωφωοσ μιψ νυιιήι Γ Β

DINAMIKA TEKNOLOGI April 2017 Vol. 9; No. 1; Hal. 27-31

posisi pixel pada image input sedangkan W
melambangkan pixel yang bertetangga dengan
pixel i dan j. Hasil dari algoritma ini adalah sebuah
image grayscale yang telah dikurangi noisenya dan
memiliki ukuran N x M x 1 depth.
Gambar 4. Arsitektur Segmentasi Image


KONVERSI KE BILEVEL

INPUT (1-IMAGE)
Input yang diberikan merupakan suatu image
(1-Image) dengan ukuran N x M x 3 depth yang
terdiri dari banyak objek dengan batasan antar
objek tidak boleh saling tumpang tindih (overlap).

PROSES
Pada proses terdapat beberapa tahapan untuk
melakukan pengolahan data berupa image, yaitu:
konversi ke grayscale, noise reduction, konversi ke
bilevel, noise removal dan connected component
labeling.

KONVERSI KE GRAYSCALE
Koversi ke grayscale dilakukan untuk
mengubah image yang sebelumnya memiliki 3
depth warna (Red, Green, dan Blue) menjadi hanya
1 depth warna saja (range warna antara 0 – 255).

Konversi ini dilakukan dengan menggunakan
rumus berikut ini:
= 0.21

+ 0.72

+ 0.07

Dimana G melambangkan pixel grayscale
sedangkan R, G, dan B melambangkan pixel Red,
Green, dan Blue pada image input. Perhitungan ini
dilakukan pada seluruh pixel yang terdapat pada
image sehingga mampu mengubah ukuran image
menjadi N x M x 1 depth.

NOISE REDUCTION
Image grayscale yang diperoleh pada proses
sebelumnya, dilakukan pengurangan noise dengan
menggunakan algoritma median filtering yang
bertujuan agar image tersebut tidak mengandung

terlalu banyak noise sehingga mengganggu proses
segmentasi pada akhirnya. Rumus median filtering
yang digunakan adalah sebagai berikut:
[ , ]=

{ [ , ], ( , ) ∈

}

Dimana Y melambangkan image hasil noise
reduction, i dan j adalah posisi pixel dari image
hasil yang hendak diperoleh, X melambangkan
image input (image hasil grayscale), a dan b adalah

Hasil dari proses sebelumnya (image grayscale
yang telah dikurangi noisenya) diubah menjadi
sebuah image bilevel (image yang hanya terdiri
dari pixel 0 dan 1) dengan tujuan pixel yang
berdekatan dapat menjadi 1 warna yaitu pixel 1
sedangkan background dari image dapat menjadi 1

warna juga yaitu pixel 0. Algoritma bilevel yang
digunakan pada sistem ini adalah adalah algoritma
Otsu dengan harapan image apapun yang
diinputkan dapat diproses tanpa harus melakukan
modifikasi nilai threshold secara manual.
Algoritma Otsu

01: Hitung histogram dan probabilitas
dari masing-masing intensitas
02: Tentukan nilai awal wi(0) dan
µi(0)
03: Untuk
seluruh
t
=
1
sampai
maksimum intensitas
04:
Update wi dan µi
05:
Hitung
( )
06: Pilih
threshold
yang
memiliki
( ) paling besar
nilai

Hasil dari algoritma ini adalah sebuah image
bilevel yang memiliki ukuran N x M x 1 depth.

NOISE REMOVAL
Image bilevel yang telah diperoleh pada proses
sebelumnya, diproses lebih lanjut untuk
menghilangkan noise yang dimiliki dengan lebih
akurat. Algoritma yang digunakan untuk proses ini
adalah Algoritma Morphology Opening dan
Closing. Proses ini dilakukan dengan tujuan agar
image bilevel yang diproses pada proses
segmentasi image dapat lebih berkualitas.
° = ( ⊖ )⨁

Rumus diatas merupakan rumus Morphology
Opening dimana o proses Morphology Opening,
proses erosi, dan proses delasi. Sedangkan rumus
untuk Morphology Closing adalah sebagai berikut:
⋅ =( ⨁ )⊖

Dimana merupakan proses Morphology Closing,
proses erosi, dan proses delasi. Setelah melalui 2

Dinamika Teknologi
έψιφ φχσι νυψωφωοσ μιψ νυιιήι Γ Β

29

DINAMIKA TEKNOLOGI April 2017 Vol. 9; No. 1; Hal. 27-31

proses tersebut maka image hasil yang diperoleh
adalah sebuah image bilevel yang dapat dikatakan
tidak memiliki noise atau sedikit noise dengan
ukuran N x M x 1 depth.

CONNECTED COMPONENT LABELING
Sesuai dengan namanya, connected component
labeling bertujuan untuk melakukan pelabelan
pada image bilevel (hasil dari proses noise
removal) yang pixel-pixelnya saling terhubung1.
Seperti pada gambar 2 maka hasil dari connected
component labeling dari image tersebut adalah 17
label dimana masing-masing label menandakan
objek sendiri-sendiri. Algortma yang digunakan
pada proses ini adalah Algoritma Two Pass dan
menghasilkan output berupa region dari masingmasing label.
Algoritma Two Pass

01: Pass Pertama
02:
Lakukan Raster Scanning
03:
Jika
pixel
bukan
merupakan
background
04:
Ambil
pixel
tetangga
dan
pixel saat ini
05:
Jika tidak memiliki tetangga,
labelkan
pixel
tersebut
tersendiri
dan
lanjutkan
proses
06:
Sebaliknya,
jika
memiliki
tetangga,
cari
tetangga
dengan
label
terkecil
dan
catatkan pada pixel saat ini
07:
Simpan
ekuivalensi
antar
label yang bertetangga
08: Pass Kedua
09:
Lakukan Raster Scanning
10:
Jika pikses bukan background
11:
Labelkan ulang pixel tersebut
berdasarkan piksel terkecil
dari tabel ekuivalensi

Hasil region dari proses ini bukan berupa kotak
saja karena dalam pengambilan image hasil jika
image input terlalu berdekatan dapat memotong
image lain yang tidak selabel. Oleh karena itu pada
penelitian ini, region yang dihasilkan berupa kotak
dan image yang terdiri dari pixel hitam putih yang
merupakan perwakilan dari image untuk label itu
secara keseluruhan.

OUTPUT (N-IMAGE)

Output yang dihasilkan adalah image input (3
depth) yang dipotong berdasarkan region yang
dihasilkan oleh connected component labeling dan
diproses menggunakan operator AND dengan
image hitam putih yang dihasilkan oleh connected
component labeling yang merupakan representasi
dari masing-masing label, sehingga output yang
dihasilkan adalah image sejumlah label yang telah
terpisah satu dengan yang lain (gambar 2 sebelah
kanan).

UJI COBA
Pada bagian ini akan dijabarkan mengenai uji
coba yang telah dilakukan. Uji coba yang
dilakukan terdiri dari fungsionalitas aplikasi
penjualan scrapbook dan layout scrapbook secara
custom serta uji coba output yang dihasilkan
apakan mampu untuk direalisasikan. Ujicoba ini
dilakukan untuk memastikan apakan setiap fungsifungsi yang dibuat dapat berfungsi dengan baik.
Berikut ini merupakan hasil pengujian melalui
kuesioner.
Tabel 1. Hasil Uji Coba Kelayakan

PERTANYAAN
Bagaimana menurut Anda
tampilan dari website ini?
Apakah desain untuk fitur
layout memudahkan Anda
untuk mendesain scrapbook
sesuai keinginan Anda?
Bagaimana
kecepatan
menampilkan image pada fitur
layout?
Bagaimana kecepatan proses
penyimpanan
hasil
desain
scrapbook yang telah Anda
buat?
Apakah
Anda
tertarik
menggunakan aplikasi ini untuk
mendesain scrapbook?

B
20%

K
5%

SK
-

95%

5%

-

-

100%

-

-

-

85%

15%

-

-

95%

5%

-

-

KESIMPULAN
Adapun beberapa kesimpulan yang diperoleh
adalah sebagai berikut:
1. Penerapan algoritma segmentasi image sangat
berguna untuk pemotongan image menjadi
beberapa objek sehingga mempermudah user
untuk mendesain scrapbook secara custom.
2. Dengan adanya fitur untuk melakukan layout
secara custom maka dapat mempermudah user
untuk mencoba-coba dan mengimajinasikan
desain yang dibuat.

1
Bertetangga satu dengan yang lain. Model piksel tetangga
yang digunakan adalah 4-tetangga atau 8-tetangga.

30

SB
75%

Dinamika Teknologi
έψιφ φχσι νυψωφωοσ μιψ νυιιήι Γ Β

DINAMIKA TEKNOLOGI April 2017 Vol. 9; No. 1; Hal. 27-31

DAFTAR PUSTAKA
1. Richard Szeliski. 2010. Computer Vision:
Algorithms and Applications.Springer Science
& Business Media.

Dinamika Teknologi
έψιφ φχσι νυψωφωοσ μιψ νυιιήι Γ Β

31