[Tips] Membaca Metadata Image JPEG/TIFF dengan PHP

Posted on May 22, 2012May 22, 2012 by bimosaurus

PHP memiliki kemampuan membaca image / gambar. Dengan kemampuan itu tentu saja PHP mampu membaca data-data asal yang terdapat dalam image tersebut. Biasanya data tersebut dinamakan metadata. Proses pembacaan metadata itu cukup mudah, yaitu dengan memanfaatkan fungsi exif_read_data(). Misal saya memiliki sebuah gambar berekstensi JPEG dengan nama satu.JPEG, yang berasal dari hasil jepretan kamera digital. Maka data asal dari gambar tersebut dapat dibaca dengan perintah berikut :

$data = exif_read_data('images/satu.jpg');
echo "< pre >";
print_r( $data );
echo "

$data = exif_read_data('images/satu.jpg');

echo "< pre >";

print_r( $data );

echo "

“;

Data yang muncul kira-kira seperti berikut:

Array
(
    [FileName] => satu.jpg
    [FileDateTime] => 1335936620
    [FileSize] => 5441417
    [FileType] => 2
    [MimeType] => image/jpeg
    [SectionsFound] => ANY_TAG, IFD0, THUMBNAIL, EXIF, INTEROP
    [COMPUTED] => Array
        (
            [html] => width="4320" height="3240"
            [Height] => 3240
            [Width] => 4320
            [IsColor] => 1
            [ByteOrderMotorola] => 0
            [ApertureFNumber] => f/2.9
            [UserComment] => 
            [UserCommentEncoding] => UNDEFINED
            [Copyright] => Copyright 2010
            [Thumbnail.FileType] => 2
            [Thumbnail.MimeType] => image/jpeg
        )

    [ImageDescription] => 
    [Make] => BenQ Corporation
    [Model] => DC C143X
    [Orientation] => 1
    [XResolution] => 288/3
    [YResolution] => 288/3
    [ResolutionUnit] => 2
    [Software] => 1.7600
    [DateTime] => 2012:05:02 12:30:21
    [YCbCrPositioning] => 2
    [Copyright] => Copyright 2010
    [Exif_IFD_Pointer] => 322
    [THUMBNAIL] => Array
        (
            [Compression] => 6
            [Orientation] => 1
            [XResolution] => 72/1
            [YResolution] => 72/1
            [ResolutionUnit] => 2
            [JPEGInterchangeFormat] => 4290
            [JPEGInterchangeFormatLength] => 7287
            [YCbCrPositioning] => 2
        )

    [ExposureTime] => 1/279
    [FNumber] => 29/10
    [ExposureProgram] => 2
    [ISOSpeedRatings] => 100
    [ExifVersion] => 0220
    [DateTimeOriginal] => 2012:05:02 12:30:21
    [DateTimeDigitized] => 2012:05:02 12:30:21
    [ComponentsConfiguration] => �
    [CompressedBitsPerPixel] => 500/100
    [ShutterSpeedValue] => 8124/1000
    [ApertureValue] => 3071/1000
    [ExposureBiasValue] => 0/100
    [MaxApertureValue] => 3171/1000
    [MeteringMode] => 4
    [LightSource] => 0
    [Flash] => 24
    [FocalLength] => 6300/1000
    [MakerNote] => 
IP1:1 exp 130 agc: 95 cal_agc : 128 P2C : 16
.
.
.

Array

(

[FileName] => satu.jpg

[FileDateTime] => 1335936620

[FileSize] => 5441417

[FileType] => 2

[MimeType] => image/jpeg

[SectionsFound] => ANY_TAG, IFD0, THUMBNAIL, EXIF, INTEROP

[COMPUTED] => Array

(

[html] => width="4320" height="3240"

[Height] => 3240

[Width] => 4320

[IsColor] => 1

[ByteOrderMotorola] => 0

[ApertureFNumber] => f/2.9

[UserComment] =>

[UserCommentEncoding] => UNDEFINED

[Thumbnail.FileType] => 2

[Thumbnail.MimeType] => image/jpeg

)

[ImageDescription] =>

[Make] => BenQ Corporation

[Model] => DC C143X

[Orientation] => 1

[XResolution] => 288/3

[YResolution] => 288/3

[ResolutionUnit] => 2

[Software] => 1.7600

[DateTime] => 2012:05:02 12:30:21

[YCbCrPositioning] => 2

[Exif_IFD_Pointer] => 322

[THUMBNAIL] => Array

(

[Compression] => 6

[Orientation] => 1

[XResolution] => 72/1

[YResolution] => 72/1

[ResolutionUnit] => 2

[JPEGInterchangeFormat] => 4290

[JPEGInterchangeFormatLength] => 7287

[YCbCrPositioning] => 2

)

[ExposureTime] => 1/279

[FNumber] => 29/10

[ExposureProgram] => 2

[ISOSpeedRatings] => 100

[ExifVersion] => 0220

[DateTimeOriginal] => 2012:05:02 12:30:21

[DateTimeDigitized] => 2012:05:02 12:30:21

[ComponentsConfiguration] => �

[CompressedBitsPerPixel] => 500/100

[ShutterSpeedValue] => 8124/1000

[ApertureValue] => 3071/1000

[ExposureBiasValue] => 0/100

[MaxApertureValue] => 3171/1000

[MeteringMode] => 4

[LightSource] => 0

[Flash] => 24

[FocalLength] => 6300/1000

[MakerNote] =>

IP1:1 exp 130 agc: 95 cal_agc : 128 P2C : 16

dan seterusnya. Hanya diambil sebagian karena cukup panjang. Pada bagian tersebut terlihat hampir semua properti pembuatan gambar tersebut. Antara lain dibuat kapan, dengan menggunakan kamera apa, ukuran berapa. Untuk keperluan programming biasanya hasil ini akan diatur dengan penguraian array lanjut. Antara lain kira-kira seperti berikut:

$data = exif_read_data('images/satu.jpg');
foreach($data as $key=>$val) {
    if(is_array($val)) {
        foreach($val as $k=>$v) {
            echo $key."[$k]: $v<br />\n";
        }
    } else
        echo "$key: ".@substr($val,0,40)."<br />\n";
}

$data = exif_read_data('images/satu.jpg');

foreach($data as $key=>$val) {

if(is_array($val)) {

foreach($val as $k=>$v) {

echo $key."[$k]: $v<br />\n";

}

} else

echo "$key: ".@substr($val,0,40)."<br />\n";

}

Hasilnya kira-kira akan seperti berikut:

FileName: IMG_0495.JPG

FileDateTime: 1335936620

FileSize: 5441417

FileType: 2

MimeType: image/jpeg

SectionsFound: ANY_TAG, IFD0, THUMBNAIL, EXIF, INTEROP

COMPUTED[html]: width="4320" height="3240"

COMPUTED[Height]: 3240

COMPUTED[Width]: 4320

COMPUTED[IsColor]: 1

COMPUTED[ByteOrderMotorola]: 0

COMPUTED[ApertureFNumber]: f/2.9

COMPUTED[UserComment]: 

COMPUTED[UserCommentEncoding]: UNDEFINED

COMPUTED[Copyright]: Copyright 2010

COMPUTED[Thumbnail.FileType]: 2

COMPUTED[Thumbnail.MimeType]: image/jpeg

ImageDescription: 

Make: BenQ Corporation

Model: DC C143X

Orientation: 1

XResolution: 288/3

YResolution: 288/3

ResolutionUnit: 2

Software: 1.7600

DateTime: 2012:05:02 12:30:21

YCbCrPositioning: 2

Copyright: Copyright 2010

Exif_IFD_Pointer: 322

THUMBNAIL[Compression]: 6

THUMBNAIL[Orientation]: 1

THUMBNAIL[XResolution]: 72/1

THUMBNAIL[YResolution]: 72/1

THUMBNAIL[ResolutionUnit]: 2

THUMBNAIL[JPEGInterchangeFormat]: 4290

THUMBNAIL[JPEGInterchangeFormatLength]: 7287

THUMBNAIL[YCbCrPositioning]: 2

ExposureTime: 1/279

FNumber: 29/10

ExposureProgram: 2

ISOSpeedRatings: 100

ExifVersion: 0220

DateTimeOriginal: 2012:05:02 12:30:21

DateTimeDigitized: 2012:05:02 12:30:21

ComponentsConfiguration: �

CompressedBitsPerPixel: 500/100

ShutterSpeedValue: 8124/1000

ApertureValue: 3071/1000

ExposureBiasValue: 0/100

MaxApertureValue: 3171/1000

MeteringMode: 4

LightSource: 0

Flash: 24

FocalLength: 6300/1000

MakerNote: 
IP1:1 exp 130 agc: 95 cal_agc : 128 P2C

UserComment: ����������������������������������������

SubSecTime: 0�

FlashPixVersion: 0100

ColorSpace: 1

ExifImageWidth: 4320

ExifImageLength: 3240

RelatedSoundFile: 

InteroperabilityOffset: 4260

FileSource: 

SceneType: 

ExposureMode: 0

WhiteBalance: 0

DigitalZoomRatio: 100/100

FocalLengthIn35mmFilm: 36

SceneCaptureType: 33

Contrast: 0

Saturation: 0

Sharpness: 0

InterOperabilityIndex: R98

InterOperabilityVersion: 0100

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

FileName: IMG_0495.JPG

FileDateTime: 1335936620

FileSize: 5441417

FileType: 2

MimeType: image/jpeg

SectionsFound: ANY_TAG, IFD0, THUMBNAIL, EXIF, INTEROP

COMPUTED[html]: width="4320" height="3240"

COMPUTED[Height]: 3240

COMPUTED[Width]: 4320

COMPUTED[IsColor]: 1

COMPUTED[ByteOrderMotorola]: 0

COMPUTED[ApertureFNumber]: f/2.9

COMPUTED[UserComment]:

COMPUTED[UserCommentEncoding]: UNDEFINED

COMPUTED[Thumbnail.FileType]: 2

COMPUTED[Thumbnail.MimeType]: image/jpeg

ImageDescription:

Make: BenQ Corporation

Model: DC C143X

Orientation: 1

XResolution: 288/3

YResolution: 288/3

ResolutionUnit: 2

Software: 1.7600

DateTime: 2012:05:02 12:30:21

YCbCrPositioning: 2

Exif_IFD_Pointer: 322

THUMBNAIL[Compression]: 6

THUMBNAIL[Orientation]: 1

THUMBNAIL[XResolution]: 72/1

THUMBNAIL[YResolution]: 72/1

THUMBNAIL[ResolutionUnit]: 2

THUMBNAIL[JPEGInterchangeFormat]: 4290

THUMBNAIL[JPEGInterchangeFormatLength]: 7287

THUMBNAIL[YCbCrPositioning]: 2

ExposureTime: 1/279

FNumber: 29/10

ExposureProgram: 2

ISOSpeedRatings: 100

ExifVersion: 0220

DateTimeOriginal: 2012:05:02 12:30:21

DateTimeDigitized: 2012:05:02 12:30:21

ComponentsConfiguration: �

CompressedBitsPerPixel: 500/100

ShutterSpeedValue: 8124/1000

ApertureValue: 3071/1000

ExposureBiasValue: 0/100

MaxApertureValue: 3171/1000

MeteringMode: 4

LightSource: 0

Flash: 24

FocalLength: 6300/1000

MakerNote:

IP1:1 exp 130 agc: 95 cal_agc : 128 P2C

UserComment: ��

SubSecTime: 0�

FlashPixVersion: 0100

ColorSpace: 1

ExifImageWidth: 4320

ExifImageLength: 3240

RelatedSoundFile:

InteroperabilityOffset: 4260

FileSource:

SceneType:

ExposureMode: 0

WhiteBalance: 0

DigitalZoomRatio: 100/100

FocalLengthIn35mmFilm: 36

SceneCaptureType: 33

Contrast: 0

Saturation: 0

Sharpness: 0

InterOperabilityIndex: R98

InterOperabilityVersion: 0100

Dengan demikian, sebenarnya situs-situs fotografi, atau lomba fotografi akan dapat mengetahui bahwa sebenarnya gambar tersebut asli atau sudah ter-edit oleh software lain seperti potoshop dan lain sebagainya, meski ternyata metadata ini juga dapat dilakukan editing, yang akan kita pelajari dalam section lain. Ada yang berminat menjadi roy suryo moderen sebagai ahli metadata?? Silakan belajar lebih lanjut . Untuk exif_read_data, hanya dapat digunakan jenis file JPG dan TIFF. Anda juga dapat mengkombinasikan dengan form upload file.

Sekian, semoga bermanfaat

[Contoh] Cara Menentukan Font pada Watermark Gambar dengan PHP

Posted on May 9, 2012 by bimosaurus

Pada contoh lalu, watermark adalah merupakan suatu tulisan timpa pada gambar, yang biasanya digunakan untuk memberi teks sebuah image gambar jpeg/png/gif sebagai keterangan atau sebagai proteksi. Penimpaan gambar akan menggabungkan tulisan dan gambar pada satu gambar image. Pada contoh lalu telah terdapat satu model watermark untuk toko online, dimana terdapat satu gambar kaos yang diberi tulisan di depannya. Kali ini kita ingin memperindah tulisan tersebut dengan font yang bervariasi. Variasi juga dapat meliputi pembentukan shadow atau bayangan. Bagaimanakah caranya? Perhatikan gambar berikut.

Gambar ini dibentuk dengan pembentukan gambar dengan watermark dilengkapi dengan fasilitas pengatur font dan sudut font. Jika pada contoh lalu kita gunakan :

imagestring( $o_gambar, 5, 80, 80, "Stok Ada", $color1 );

1	imagestring( $o_gambar, 5, 80, 80, "Stok Ada", $color1 );

Maka sekarang akan digantikan dengan

imagettftext( $o_gambar, $ukuran_font, $sudut_miring, $pixel_start_kiri, $pixel_start_atas, $warna, $jenis_font, $text );

1	imagettftext( $o_gambar, $ukuran_font, $sudut_miring, $pixel_start_kiri, $pixel_start_atas, $warna, $jenis_font, $text );

Sedangkan shadow, atau bayangan diambil dengan cara membuat tulisan serupa dengan warna yang berbeda, dan diberikan selisih pixel_start_kiri dan pixel_start_atas nya.

imagettftext($o_gambar, 16, 30, 51, 151, $color1, $font, $text);
imagettftext($o_gambar, 16, 30, 50, 150, $color2, $font, $text);

1 2	imagettftext($o_gambar, 16, 30, 51, 151, $color1, $font, $text); imagettftext($o_gambar, 16, 30, 50, 150, $color2, $font, $text);

Sudut dapat diatur sesuai derajatnya. Silakan mencoba mengganti angka 30 tersebut menjadi angka sudut yang anda suka. Misal tulisan tegak, maka silakan mengganti dengan angka 90 dengan konsekuensi mengubah start pixelnya.

Dengan $jenis_font diambilkan dari file TTF yang anda miliki. File TTF adalah file master dari sebuah font. Misal dalam kasus ini saya ambil Arial. Maka source code pembentuk gambar akan menjadi seperti berikut:

<?php

$gambar_sumber    = "images/kaos.jpeg";

$o_gambar         = imagecreatefromjpeg( $gambar_sumber );

$color1           = imagecolorallocate( $o_gambar, 255, 255, 192 );
$color2           = imagecolorallocate( $o_gambar, 255, 255, 0 );
$font             = 'arial.ttf';

$text = "Bimosaurus.com";
imagettftext($o_gambar, 16, 30, 51, 151, $color1, $font, $text);
imagettftext($o_gambar, 16, 30, 50, 150, $color2, $font, $text);


header( 'Content-type: image/png' );
imagepng( $o_gambar );
imagedestroy( $o_gambar );



?>

<?php

$gambar_sumber = "images/kaos.jpeg";

$o_gambar = imagecreatefromjpeg( $gambar_sumber );

$color1 = imagecolorallocate( $o_gambar, 255, 255, 192 );

$color2 = imagecolorallocate( $o_gambar, 255, 255, 0 );

$font = 'arial.ttf';

$text = "Bimosaurus.com";

imagettftext($o_gambar, 16, 30, 51, 151, $color1, $font, $text);

imagettftext($o_gambar, 16, 30, 50, 150, $color2, $font, $text);

header( 'Content-type: image/png' );

imagepng( $o_gambar );

imagedestroy( $o_gambar );

Bisakah membuat tulisan di bawahnya lagi? Tentu saja bisa. Hanya dengan membuat sebuah tulisan, dan mengatur start pixel atasnya, maka akan terbentuk satu tulisan lagi, sesuai dengan pixelnya. Mudah bukan? Selamat mencoba semoga sukses, dan semoga artikel ini bermanfaat.

[Contoh] Cara Membuat Watermark Tulisan Pada Gambar dengan PHP

Posted on May 8, 2012May 8, 2012 by bimosaurus

Jika posting sebelum ini membahas tentang dua gambar yang ditumpuk, bagaimanakah jika yang akan ditumpuk pada gambar utama adalah tulisan data? PHP memiliki fasilitas untuk melakukan hal itu. Misalnya kita memiliki gambar sebagai berikut:

Gambar tersebut anggaplah merupakan sebuah produk dari toko online. Gambar produk tersebut akan diberi tanda sesuai data kondisi yang ada. Misal : Stock Tersedia, All Size, Sold, Kosong, Booked, dan sejenisnya. Kita ingin tulisan yang dibentuk adalah tulisan yang benar-benar ada pada gambar, bukan tulisan bentukan CSS dengan z-index di depan, sehingga tulisan akan menjadi bagian dari gambar. Bisakah? Mari kita coba percobaan seperti demikian.

<?php

$gambar_sumber    = "images/kaos.jpeg";

$o_gambar         = imagecreatefromjpeg( $gambar_sumber );

$color1            = imagecolorallocate( $o_gambar, 240, 0, 240 );
$color2            = imagecolorallocate( $o_gambar, 255, 255, 0 );

$data = "Stock Ada";
imagestring( $o_gambar, 5, 80, 80, $data, $color1 );

imagestring( $o_gambar, 10, 50, 150, "bimosaurus.com", $color2 );


header( 'Content-type: image/png' );
imagepng( $o_gambar );
imagedestroy( $o_gambar );



?>

<?php

$gambar_sumber = "images/kaos.jpeg";

$o_gambar = imagecreatefromjpeg( $gambar_sumber );

$color1 = imagecolorallocate( $o_gambar, 240, 0, 240 );

$color2 = imagecolorallocate( $o_gambar, 255, 255, 0 );

$data = "Stock Ada";

imagestring( $o_gambar, 5, 80, 80, $data, $color1 );

imagestring( $o_gambar, 10, 50, 150, "bimosaurus.com", $color2 );

header( 'Content-type: image/png' );

imagepng( $o_gambar );

imagedestroy( $o_gambar );

Hasilnya kira-kira adalah seperti berikut :

Kita bisa melakukan pengubahan data “Stock Ada” dan sejenisnya dengan cara memberikan fasilitas form updatenya. Di lain posting akan dibahas lebih lengkap .

Nah, selamat mencoba, semoga sukses, dan semoga artikel ini bermanfaat.

[Contoh] Cara Menumpuk Join Dua Gambar dengan PHP ( watermark )

Posted on May 8, 2012May 8, 2012 by bimosaurus

Mungkin anda pernah melihat gambar seperti berikut :

Perhatikan pada bagian kanan bawah, anda akan melihat sebuah gambar berupa tulisan yang menimpa gambar utama. Gambar penumpuk tersebut dinamai dengan watermark. Biasanya anda akan kerepotan membuat watermark ini dengan menggunakan photosop atau corel baru kemudian diupload. Namun sebenarnya PHP memiliki kemampuan untuk mengolah hal tersebut. Dengan memanfaatkan kemampuan itu, maka kita dapat dengan mudah upload sembarang gambar tanpa watermark lebih dulu, dan akan secara otomatis terbentuk watermark dengan PHP.

Dengan fasilitas tersebut, maka banyak hal yang bisa dilakukan antara lain :

Memberi tanda SOLD / atau terjual pada produk toko online, jika produk tersebut telah terjual
Memberi proteksi gambar agar mempersulit proses penjiplakan oleh orang lain, karena akan terbawa tulisan watermarknya
Memberi keterangan gambar langsung pada gambarnya
dan lain sebagainya

PENUMPUKAN DUA GAMBAR

Proses penumpukan dua gambar akan dilakukan dengan memanfaatkan fasilitas GD PHP Disini saya memiliki dua buah gambar, yang satu adalah skak.jpg, dan satunya adalah skak_text.jpg.

skak.jpg

Gambar kedua adalah skak_text.jpg

skak_text.jpg

Gambar ini akan kita tumpuk dengan posisi background adalah skak.jpg menjadi background bagi skak_text.jpg. Selain itu, skak_text.jpg akan diberi transparansi agar background masih terlihat. Maka akan kita bangun script seperti berikut:

<?php
//tulisan tag php harus pada line pertama. Catat!

//menentukan file gambar
$gambar_satu      = "images/skak.jpg";
$gambar_dua       = "images/skak_text.jpeg";


//mendekode gambar
$o_gambar_satu    = imagecreatefromjpeg( $gambar_satu );
$o_gambar_dua     = imagecreatefromjpeg( $gambar_dua );

//ngambil ukuran gambar dua
$o_gambar_duaX = imagesx( $o_gambar_dua );
$o_gambar_duaY = imagesy( $o_gambar_dua );

//melakukan merging $filedekode1, $filedekode2, koordinat kiri, koordinat atas, jarak geser kiri, jarak geser kanan, koordinat kanan, koordinat bawah, persen transparansi

imagecopymerge( $o_gambar_satu, $o_gambar_dua, 50, 100, 0, 0, $o_gambar_duaX, $o_gambar_duaY, 70 );



//Output
header( 'Content-type: image/png' );
imagepng( $o_gambar_satu );
imagedestroy( $o_gambar_satu );

?>

<?php

//tulisan tag php harus pada line pertama. Catat!

//menentukan file gambar

$gambar_satu = "images/skak.jpg";

$gambar_dua = "images/skak_text.jpeg";

//mendekode gambar

$o_gambar_satu = imagecreatefromjpeg( $gambar_satu );

$o_gambar_dua = imagecreatefromjpeg( $gambar_dua );

//ngambil ukuran gambar dua

$o_gambar_duaX = imagesx( $o_gambar_dua );

$o_gambar_duaY = imagesy( $o_gambar_dua );

//melakukan merging $filedekode1, $filedekode2, koordinat kiri, koordinat atas, jarak geser kiri, jarak geser kanan, koordinat kanan, koordinat bawah, persen transparansi

imagecopymerge( $o_gambar_satu, $o_gambar_dua, 50, 100, 0, 0, $o_gambar_duaX, $o_gambar_duaY, 70 );

//Output

header( 'Content-type: image/png' );

imagepng( $o_gambar_satu );

imagedestroy( $o_gambar_satu );

Gambar yang akan dihasilkan adalah seperti berikut

Nah mudah kan?

Lantas bagaimana untuk membuat proses Upload? Mudah, tinggal menambahkan baris penambah form, filterisasi jika upload terset, dan pengambilan file dengan mengambil gambar dari tmp_name

Seperti berikut:

<?php


if( isset( $_POST['submit'] ) ){

//menentukan file gambar
$gambar_satu = $_FILES['upfile_1']['tmp_name'];
$gambar_dua  = $_FILES['upfile_2']['tmp_name'];

//mendekode gambar
$o_gambar_satu    = imagecreatefromjpeg( $gambar_satu );
$o_gambar_dua     = imagecreatefromjpeg( $gambar_dua );

//ngambil ukuran gambar dua
$o_gambar_duaX = imagesx( $o_gambar_dua );
$o_gambar_duaY = imagesy( $o_gambar_dua );

//melakukan merging $filedekode1, $filedekode2, koordinat kiri, koordinat atas, jarak geser kiri, jarak geser kanan, koordinat kanan, koordinat bawah, persen transparansi

imagecopymerge( $o_gambar_satu, $o_gambar_dua, 50, 100, 0, 0, $o_gambar_duaX, $o_gambar_duaY, 70 );



//Output
header( 'Content-type: image/png' );
imagepng( $o_gambar_satu );
imagedestroy( $o_gambar_satu );
}


?>
<form action="" method="post" enctype="multipart/form-data">
<input type="file" name="upfile_1"><br /><input type="file" name="upfile_2"><br /><input type="submit" name="submit" value="upload">
</form>

<?php

if( isset( $_POST['submit'] ) ){

//menentukan file gambar

$gambar_satu = $_FILES['upfile_1']['tmp_name'];

$gambar_dua = $_FILES['upfile_2']['tmp_name'];

//mendekode gambar

$o_gambar_satu = imagecreatefromjpeg( $gambar_satu );

$o_gambar_dua = imagecreatefromjpeg( $gambar_dua );

//ngambil ukuran gambar dua

$o_gambar_duaX = imagesx( $o_gambar_dua );

$o_gambar_duaY = imagesy( $o_gambar_dua );

//melakukan merging $filedekode1, $filedekode2, koordinat kiri, koordinat atas, jarak geser kiri, jarak geser kanan, koordinat kanan, koordinat bawah, persen transparansi

imagecopymerge( $o_gambar_satu, $o_gambar_dua, 50, 100, 0, 0, $o_gambar_duaX, $o_gambar_duaY, 70 );

//Output

header( 'Content-type: image/png' );

imagepng( $o_gambar_satu );

imagedestroy( $o_gambar_satu );

}

</form>

Nah, sebelum lanjut, selamat mencoba, semoga sukses, dan semoga artikel ini bermanfaat.

[Contoh] Cara Sederhana Membuat Image Gambar dengan PHP

Posted on May 8, 2012 by bimosaurus

Tentu kita sering melihat tulisan berformat gambar semacam ini :

Kemudian kita juga sering melihat CAPTCHA atau Verification Code yang berupa gambar tulisan namun dapat berubah-ubah secara acak / random. Ternyata hal itu dapat kita buat sendiri dengan PHP biasa. PHP memang menyediakan fasilitas untuk mengolah image termasuk membuat gambar. Namun memang installasi PHP kita harus terinstall secara lengkap termasuk paket GD. Namun biasanya pada paket webserver kita telah tersedia. Xampp, Wamp, AppServ dan lain-lain telah menyediakannya. Untuk para pengguna Linux, tentu dapat dengan mudah melakukan installasinya. Untuk para pengguna Debian, Ubuntu dan turunannya, dapat menggunakan perintah : apt-get install php5-gd, atau apt-get install php-gd. Sedangkan pengguna RedHat, Fedora, Centos dan turunannya dapat menggunakan yum install php5-gd.

Untuk membuat script tersebut, sangat mudah caranya. Hanya saja karena sintaks yang tersedia untuk pembuatan Image ini cukup banyak, tak apalah jika kita menyediakan catatan tentang hal itu. Secara lengkap vocab perintah tersebut dapat dilihat di sini http://php.net/manual/en/book.image.php. Kita tidak akan membahas seluruhnya, namun hanya beberapa untuk dijadikan contoh pertama.

Kali ini kita akan buat sebuah script pembuat image tulisan. Misal akan kita buat tulisan dengan bunyi : bimosaurus.com, dengan warna kuning, background hitam, maka akan kita buat script sedemikian :

<?php
//tulisan tag php harus ada di baris pertama.. Catat

$img           = imagecreate( 200, 30 );//membuat area gambar
$background    = imagecolorallocate( $img, 0, 0, 0 );//menentukan background
$color         = imagecolorallocate( $img, 255, 255, 0 );//menentukan warna depan


//buat kata-kata dengan margin kiri 10, margin atas 30 dan ketebalan 5px
imagestring( $img, 10, 30, 5, "bimosaurus.com", $color );


header( "Content-type: image/png" ); //bentuk gambar
imagepng( $img );
imagecolordeallocate( $color );
imagecolordeallocate( $background );
imagedestroy( $img );
?>

<?php

//tulisan tag php harus ada di baris pertama.. Catat

$img = imagecreate( 200, 30 );//membuat area gambar

$background = imagecolorallocate( $img, 0, 0, 0 );//menentukan background

$color = imagecolorallocate( $img, 255, 255, 0 );//menentukan warna depan

//buat kata-kata dengan margin kiri 10, margin atas 30 dan ketebalan 5px

imagestring( $img, 10, 30, 5, "bimosaurus.com", $color );

header( "Content-type: image/png" ); //bentuk gambar

imagepng( $img );

imagecolordeallocate( $color );

imagecolordeallocate( $background );

imagedestroy( $img );

Kemudian kita simpan sebagai image.php, panggillah di web browser. Kita dapat melakukan penyisipan ke dalam halaman lain dengan cara html biasa:

<img src="image.php">

1	<img src="image.php">

Nah ternyata mudah bukan… Lain posting akan dibahas gambar yang lebih kompleks. Selamat mencoba, semoga bermanfaat.

[Tips] Cara Merezise Gambar dengan SimpleImage PHP Script

Posted on May 7, 2012May 7, 2012 by bimosaurus

PHP adalah sebuah bahasa pemrograman web sisi server. Sebagai bahasa pemrograman sisi server, maka PHP juga memiliki kemampuan melakukan olah data baik berupa data text dan data gambar. Kemampuan ini terutama digunakan ketika PHP mengerjakan Gallery gambar, atau sebuah profil produk dimana harus tersedia gambar berbagai ukuran Pixel dan Byte nya. Sebagai contoh kasus adalah sebuah toko online, memiliki kebutuhan sisi admin dimana operator harus mampu melakukan upload gambar dengan ukuran berapapun, selanjutnya akan diatur oleh PHP dengan dipecah menjadi beberapa. Antara lain adalah menjadi gambar thumbnail, gambar medium dan gambar besar. Bayangkan saja jika halaman depan sebuah profil produk menampilkan banyak gambar dan gambar tersebut masih berukuran besar 800kb – 1mb, tentu akan memakan waktu dan juga quota bandwidth bagi client.

SimpleImage ini bisa disalin di http://www.white-hat-web-design.co.uk/blog/resizing-images-with-php/ dan silakan dijadikan sebuah file dengan nama SimpleImage.php. Namun menurut saya, ada beberapa revisi dari script tersebut. Yaitu pada bagian yang melibatkan $this->getheight(), diubah menjadi $this->getHeight(). Sehingga script SimpleImage ini menjadi seperti ini

<?php
 
/*
* File: SimpleImage.php
* Author: Simon Jarvis
* Copyright: 2006 Simon Jarvis
* Date: 08/11/06
* Link: http://www.white-hat-web-design.co.uk/articles/php-image-resizing.php
*
* This program is free software; you can redistribute it and/or
* modify it under the terms of the GNU General Public License
* as published by the Free Software Foundation; either version 2
* of the License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details:
* http://www.gnu.org/licenses/gpl.html
*
*/
 
class SimpleImage {
 
   var $image;
   var $image_type;
 
   function load($filename) {
 
      $image_info = getimagesize($filename);
      $this->image_type = $image_info[2];
      if( $this->image_type == IMAGETYPE_JPEG ) {
 
         $this->image = imagecreatefromjpeg($filename);
      } elseif( $this->image_type == IMAGETYPE_GIF ) {
 
         $this->image = imagecreatefromgif($filename);
      } elseif( $this->image_type == IMAGETYPE_PNG ) {
 
         $this->image = imagecreatefrompng($filename);
      }
   }
   function save($filename, $image_type=IMAGETYPE_JPEG, $compression=75, $permissions=null) {
 
      if( $image_type == IMAGETYPE_JPEG ) {
         imagejpeg($this->image,$filename,$compression);
      } elseif( $image_type == IMAGETYPE_GIF ) {
 
         imagegif($this->image,$filename);
      } elseif( $image_type == IMAGETYPE_PNG ) {
 
         imagepng($this->image,$filename);
      }
      if( $permissions != null) {
 
         chmod($filename,$permissions);
      }
   }
   function output($image_type=IMAGETYPE_JPEG) {
 
      if( $image_type == IMAGETYPE_JPEG ) {
         imagejpeg($this->image);
      } elseif( $image_type == IMAGETYPE_GIF ) {
 
         imagegif($this->image);
      } elseif( $image_type == IMAGETYPE_PNG ) {
 
         imagepng($this->image);
      }
   }
   function getWidth() {
 
      return imagesx($this->image);
   }
   function getHeight() {
 
      return imagesy($this->image);
   }
   function resizeToHeight($height) {
 
      $ratio = $height / $this->getHeight();
      $width = $this->getWidth() * $ratio;
      $this->resize($width,$height);
   }
 
   function resizeToWidth($width) {
      $ratio = $width / $this->getWidth();
      $height = $this->getHeight() * $ratio;
      $this->resize($width,$height);
   }
 
   function scale($scale) {
      $width = $this->getWidth() * $scale/100;
      $height = $this->getHeight() * $scale/100;
      $this->resize($width,$height);
   }
 
   function resize($width,$height) {
      $new_image = imagecreatetruecolor($width, $height);
      imagecopyresampled($new_image, $this->image, 0, 0, 0, 0, $width, $height, $this->getWidth(), $this->getHeight());
      $this->image = $new_image;
   }      
 
}
?>

100

101

102

103

104

105

<?php

* File: SimpleImage.php

* Author: Simon Jarvis

* Date: 08/11/06

* Link: http://www.white-hat-web-design.co.uk/articles/php-image-resizing.php

* This program is free software; you can redistribute it and/or

* modify it under the terms of the GNU General Public License

* as published by the Free Software Foundation; either version 2

* of the License, or (at your option) any later version.

* This program is distributed in the hope that it will be useful,

* but WITHOUT ANY WARRANTY; without even the implied warranty of

* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the

* GNU General Public License for more details:

* http://www.gnu.org/licenses/gpl.html

class SimpleImage {

var $image;

var $image_type;

function load($filename) {

$image_info = getimagesize($filename);

$this->image_type = $image_info[2];

if( $this->image_type == IMAGETYPE_JPEG ) {

$this->image = imagecreatefromjpeg($filename);

} elseif( $this->image_type == IMAGETYPE_GIF ) {

$this->image = imagecreatefromgif($filename);

} elseif( $this->image_type == IMAGETYPE_PNG ) {

$this->image = imagecreatefrompng($filename);

}

function save($filename, $image_type=IMAGETYPE_JPEG, $compression=75, $permissions=null) {

if( $image_type == IMAGETYPE_JPEG ) {

imagejpeg($this->image,$filename,$compression);

} elseif( $image_type == IMAGETYPE_GIF ) {

imagegif($this->image,$filename);

} elseif( $image_type == IMAGETYPE_PNG ) {

imagepng($this->image,$filename);

}

if( $permissions != null) {

chmod($filename,$permissions);

}

function output($image_type=IMAGETYPE_JPEG) {

if( $image_type == IMAGETYPE_JPEG ) {

imagejpeg($this->image);

} elseif( $image_type == IMAGETYPE_GIF ) {

imagegif($this->image);

} elseif( $image_type == IMAGETYPE_PNG ) {

imagepng($this->image);

}

function getWidth() {

return imagesx($this->image);

}

function getHeight() {

return imagesy($this->image);

}

function resizeToHeight($height) {

$ratio = $height / $this->getHeight();

$width = $this->getWidth() * $ratio;

$this->resize($width,$height);

}

function resizeToWidth($width) {

$ratio = $width / $this->getWidth();

$height = $this->getHeight() * $ratio;

$this->resize($width,$height);

}

function scale($scale) {

$width = $this->getWidth() * $scale/100;

$height = $this->getHeight() * $scale/100;

$this->resize($width,$height);

}

function resize($width,$height) {

$new_image = imagecreatetruecolor($width, $height);

imagecopyresampled($new_image, $this->image, 0, 0, 0, 0, $width, $height, $this->getWidth(), $this->getHeight());

$this->image = $new_image;

}

CARA MENGGUNAKAN.
Cara menggunakan script ini sangat mudah. Yaitu:

Melakukan include SimpleImage.php
Membuka sebuah object dari Class SimpleImage
Meload gambar
Mengolah gambar
Menyimpan gambar dengan format baru

CONTOH: Misalkan kita akan membuat sebuah form upload gambar, dimana ketika diupload, maka gambar di server akan muncul dengan format ukuran 400×400 dan juga thumbnail 120×120. Dengan demikian script menjadi seperti demikian :

include "includes/SimpleImage.php";


if( isset( $_POST['upload'] ) ){
$file = $_FILES['upfile']['tmp_name'];

$image = new SimpleImage();

$image->load($file);

$image->resize(400,400);

$image->save("../images/product/".$_FILES['upfile']['name']);

$image->resize(120,120);

$image->save("../images/product/thumb/".$_FILES['upfile']['name']);		
}
?>


<form action="" method="post" enctype="multipart/form-data">
<tr><th>Gambar</th><td><input type="file" name="upfile"></td></tr>
<tr><th></th><td><input type="submit" name="upload" value="Upload"></td></tr>
</table>
</form>

include "includes/SimpleImage.php";

if( isset( $_POST['upload'] ) ){

$file = $_FILES['upfile']['tmp_name'];

$image = new SimpleImage();

$image->load($file);

$image->resize(400,400);

$image->save("../images/product/".$_FILES['upfile']['name']);

$image->resize(120,120);

$image->save("../images/product/thumb/".$_FILES['upfile']['name']);

}

<tr><th>Gambar</th><td><input type="file" name="upfile"></td></tr>

</table>

</form>

PENJELASAN:
Ketika script dipanggil request, maka jika tidak terset input type upload alias karena belum ada POST, maka hanya akan ditampilkan form biasa. Selanjutnya jika telah diisi, dan diPOST, maka script akan terpanggil dengan kondisi terset POST. Selanjutnya akan di-include SimpleImage, menentukan variable file yang diupload, diload, diolah resize, dan disimpan pada tempat yang telah ditentukan pada save.

Berikut beberapa operasional yang disediakan oleh SimpleImage ini:

Load
Save
Output
GetWidth dan GetHeight
Resize to Height dan resize to width
Scale
Resize

Dengan SimpleImage, selamat mencoba proses upload gambar dan melakukan operasional standard SimpleImage. Semoga bermanfaat.

Artikel terkait

Artikel terkait

Artikel terkait

Artikel terkait

Artikel terkait