() translation by (you can also view the original English article)
Pernah menginginkan semua tujuan, metode mengubah ukuran gambar dengan mudah digunakan pada PHP? Nah, itulah kelas PHP ada - kepingan fungsi yang dapat digunakan kembali yang kita panggil untuk melakukan pekerjaan kotor di balik layar. Kita akan belajar bagaimana menciptakan kelas kita sendiri yang akan dibangun dengan baik, dan juga dapat dikembangkan. Mengubah ukuran harus mudah. Seberapa mudah? Bagaimana dengan tiga langkah!
Pengantar
Untuk memberi Anda sekilas tentang apa yang ingin kami capai dengan kelas kami, kelas seharusnya:
- Mudah digunakan
- Format bebas I.E., buka, ubah ukuran, dan simpan sejumlah format gambar yang berbeda.
- Ukuran cerdas - Tidak ada distorsi gambar!
Catatan: Ini bukan tutorial tentang cara membuat kelas dan objek, dan walaupun keterampilan ini akan membantu, tidak perlu mengikuti tutorial ini.
Ada banyak sampul - Mari kita mulai.
Langkah 1 Persiapan
Kita akan mulai dengan mudah. Di direktori kerja Anda buat dua file: satu disebut index.php, yang lain resize-class.php
Langkah 2 memanggil objek
Untuk memberikan gambaran tentang apa yang kami sedang berusaha untuk capai, kita akan mulai dengan pengkodean panggilan kita akan gunakan untuk mengubah ukuran gambar. Buka index.php file dan tambahkan kode berikut.
Seperti yang Anda lihat, ada logika yang bagus untuk apa yang kita lakukan. Kita membuka file gambar, kita menetapkan dimensi yang kita ingin ubah ukuran gambarnya, dan jenis ukuran.
Kemudian kita simpan gambar, pilih format gambar yang kita inginkan dan kualitas gambar. Simpan dan tutup index.php file.
1 |
// *** Include the class
|
2 |
include("resize-class.php"); |
3 |
|
4 |
// *** 1) Initialize / load image
|
5 |
$resizeObj = new resize('sample.jpg'); |
6 |
|
7 |
// *** 2) Resize image (options: exact, portrait, landscape, auto, crop)
|
8 |
$resizeObj -> resizeImage(150, 100, 'crop'); |
9 |
|
10 |
// *** 3) Save image
|
11 |
$resizeObj -> saveImage('sample-resized.gif', 100); |
Dari kode di atas Anda dapat melihat kita membuka jpg file tapi menyimpan gif. Ingat, ini adalah semua tentang fleksibilitas.
Langkah 3 kelas kerangka
Ini adalah object-oriented Programming (OOP) yang membuat perasaan senyaman mungkin. Memikirkan kelas seperti pola; Anda dapat merangkum data - lain jargon istilah itu berarti benar-benar hanya menyembunyikan data. Kita kemudian kembali kelas ini berulang-ulang tanpa perlu menulis ulang salah satu kode mengubah ukuran - Anda hanya perlu untuk memanggil metode yang tepat seperti yang kita lakukan di langkah kedua. Sekali pola kami telah diciptakan, kita membuat contoh pola ini, yang disebut objek.
"Fungsi membangun, yang dikenal sebagai konstruktor, adalah metode kelas khusus yang dipanggil oleh kelas ketika Anda membuat objek baru."
Mari kita mulai menciptakan kelas ukuran kami. Buka file ukuran-class.php. Di bawah ini adalah benar-benar dasar kelas kerangka struktur yang saya menamakannya 'Ubah'. Perhatikan garis komentar variabel kelas; Inilah yang kita akan mulai menambahkan variabel penting kelas kami kemudian.
Fungsi membangun, yang dikenal sebagai konstruktor, adalah metode kelas khusus (istilah "metode" adalah sama dengan fungsi, namun, ketika berbicara tentang kelas dan objek metode istilah yang sering digunakan) yang akan dipanggil oleh kelas ketika Anda membuat objek baru. Hal ini membuatnya cocok bagi kita untuk melakukan beberapa Menginisialisasi - yang akan kita lakukan pada langkah berikutnya.
1 |
Class resize |
2 |
{
|
3 |
// *** Class variables
|
4 |
|
5 |
public function __construct() |
6 |
{
|
7 |
|
8 |
}
|
9 |
}
|
Perhatikan bahwa garis bawah ganda untuk membangun metode.
Langkah 4 Pembangunan
Kita akan mengubah konstruktor metode di atas. Pertama, kita akan lewati dalam nama file (dan path) dari gambar yang akan diubah ukurannya. Kita akan memanggil variabel ini $fileName.
Kita perlu membuka file berlalu dengan PHP (lebih khusus PHP GD Library) sehingga PHP dapat membaca gambar. Kami melakukan ini dengan metode kostum 'openImage'. Aku akan mendapatkan bagaimana metode ini
bekerja dalam sekejap, tetapi untuk sekarang, kita perlu untuk menyimpan hasilnya sebagai sebuah variabel kelas. Variabel kelas adalah hanya variabel - tapi ini khusus untuk kelas. Ingat komentar variabel kelas yang saya sebutkan sebelumnya? Tambahkan 'gambar' sebagai variabel pribadi dengan mengetik 'pribadi $image;'. Dengan menetapkan variabel sebagai 'Pribadi' Anda menetapkan ruang lingkup variabel yang jadi itu hanya dapat diakses oleh kelas. Sekarang kita dapat membuat panggilan ke gambar dibuka dikenal sebagai sumber daya, yang kami akan melakukan kemudian ketika kita mengubah ukuran.
Sementara itu, mari kita menyimpan tinggi dan lebar gambar. Aku punya perasaan ini akan menjadi berguna kemudian.
Sekarang yang harus kamu ikuti.
1 |
Class resize |
2 |
{
|
3 |
// *** Class variables
|
4 |
private $image; |
5 |
private $width; |
6 |
private $height; |
7 |
|
8 |
function __construct($fileName) |
9 |
{
|
10 |
// *** Open up the file
|
11 |
$this->image = $this->openImage($fileName); |
12 |
|
13 |
// *** Get width and height
|
14 |
$this->width = imagesx($this->image); |
15 |
$this->height = imagesy($this->image); |
16 |
}
|
17 |
}
|
Metode imagesx dan imagesy yang dibangun dalam fungsi yang merupakan bagian dari GD library. Mereka mengambil lebar dan tinggi dari gambar Anda, masing-masing.
Langkah 5 membuka gambar
Di langkah sebelumnya, kita memanggil metode kustom openImage. Dalam langkah ini kita akan membuat metode. Kami ingin script untuk melakukan pemikiran bagi kita, jadi tergantung pada apa jenis filenya, script harus menentukan apakah fungsi GD Library ini panggilan untuk membuka gambar. Hal ini mudah dicapai dengan membandingkan ekstensi file dengan switch pernyataan.
Kami melewati file yang kita ingin mengubah ukuran dan kembali pada resource file.
1 |
private function openImage($file) |
2 |
{
|
3 |
// *** Get extension
|
4 |
$extension = strtolower(strrchr($file, '.')); |
5 |
|
6 |
switch($extension) |
7 |
{
|
8 |
case '.jpg': |
9 |
case '.jpeg': |
10 |
$img = @imagecreatefromjpeg($file); |
11 |
break; |
12 |
case '.gif': |
13 |
$img = @imagecreatefromgif($file); |
14 |
break; |
15 |
case '.png': |
16 |
$img = @imagecreatefrompng($file); |
17 |
break; |
18 |
default: |
19 |
$img = false; |
20 |
break; |
21 |
}
|
22 |
return $img; |
23 |
}
|
Langkah 6 cara untuk mengubah ukuran
Ini adalah dimana cinta akan terjadi. Langkah ini adalah benar-benar hanya penjelasan tentang apa yang akan kami lakukan - jadi tidak ada pekerjaan di sini. Pada langkah berikutnya, kita akan menciptakan metode publik yang kami akan menelepon untuk melakukan mengubah ukuran kami; Jadi masuk akal untuk lulus di lebar dan tinggi, serta informasi tentang bagaimana kita ingin mengubah ukuran gambar. Mari kita bicara tentang hal ini sejenak. Akan ada skenario di mana Anda ingin mengubah ukuran gambar untuk ukuran yang tepat. Besar, mari kita memasukkan ini. Tapi juga akan ada saat-saat Anda harus mengubah ukuran ratusan gambar dan masing-masing gambar memiliki rasio aspek berbeda - berpikir gambar potret. Mengubah ukuran untuk ukuran yang tepat akan menyebabkan distorsi parah. Jika kita melihat kami pilihan untuk mencegah distorsi:
- Mengubah ukuran gambar sedekat yang kami bisa untuk dimensi gambar kami yang baru, sambil tetap menjaga aspek rasio.
- Mengubah ukuran gambar sedekat kita bisa ke dimensi gambar kami baru dan potong sisanya.
Kedua pilihan layak, tergantung pada kebutuhan Anda.
Yap. kami akan berusaha untuk menangani semua hal di atas. Untuk rekap, kita akan memberikan pilihan untuk:
- Mengubah ukuran dengan lebar/tinggi yang tepat. (tepatnya)
- Resize oleh lebar - lebar tepat akan diatur, tinggi akan disesuaikan aspek rasio. (landscape)
- Mengubah ukuran dengan ketinggian - seperti mengubuah ukuran secara lebar, tetapi tinggi akan diatur dan lebar disesuaikan secara dinamis. (potret)
- Otomatis menentukan pilihan 2 dan 3. Jika Anda sedang perulangan melalui folder dengan berbagai ukuran foto, biarkan script yang menentukan bagaimana untuk menangani hal ini. (otomatis)
- Mengubah ukuran, kemudian memotong. Ini adalah favorit saya. Ukuran yang tepat, tidak ada distorsi. (memotong)
Langkah 7 Mengubah ukuran. Mari kita melakukannya!
Ada dua bagian untuk metode mengubah ukuran. Yang pertama adalah mendapatkan optimal lebar dan tinggi untuk gambar baru kami dengan menciptakan beberapa metode kustom - dan tentu saja melewati di kami mengubah ukuran 'pilihan' seperti dijelaskan di atas. Lebar dan tinggi kembali sebagai array dan ditetapkan untuk masing-masing variabel. Merasa bebas untuk 'lulus sebagai referensi'- tapi aku bukan penggemar itu.
Bagian kedua adalah apa melakukan pengubah ukuran sebenarnya. Untuk menjaga ukuran tutorial ini, aku akan membiarkan Anda membaca tentang fungsi GD berikut:
Kami juga menyimpan output dari metode imagecreatetruecolor (warna gambar baru) sebagai variabel kelas. Tambahkan 'pribadi $imageResized;' dengan variabel kelas Anda yang lain.
Mengubah ukuran dilakukan oleh modul PHP dikenal sebagai GD Library. Banyak metode yang kami gunakan disediakan oleh Perpustakaan ini.
1 |
// *** Add to class variables
|
2 |
private $imageResized; |
1 |
public function resizeImage($newWidth, $newHeight, $option="auto") |
2 |
{
|
3 |
|
4 |
// *** Get optimal width and height - based on $option
|
5 |
$optionArray = $this->getDimensions($newWidth, $newHeight, strtolower($option)); |
6 |
|
7 |
$optimalWidth = $optionArray['optimalWidth']; |
8 |
$optimalHeight = $optionArray['optimalHeight']; |
9 |
|
10 |
// *** Resample - create image canvas of x, y size
|
11 |
$this->imageResized = imagecreatetruecolor($optimalWidth, $optimalHeight); |
12 |
imagecopyresampled($this->imageResized, $this->image, 0, 0, 0, 0, $optimalWidth, $optimalHeight, $this->width, $this->height); |
13 |
|
14 |
// *** if option is 'crop', then crop too
|
15 |
if ($option == 'crop') { |
16 |
$this->crop($optimalWidth, $optimalHeight, $newWidth, $newHeight); |
17 |
}
|
18 |
}
|
Langkah 8 pohon keputusan
Semakin banyak pekerjaan yang Anda lakukan sekarang, semakin sedikit Anda harus dilakukan ketika Anda mengubah ukuran. Metode ini memilih rute untuk diambil, dengan tujuan mendapatkan optimal ukuran lebar dan tinggi berdasarkan pilihan ukuran. Ini akan menyebutnya metode yang tepat, yang kami akan membuat di langkah berikutnya.
1 |
private function getDimensions($newWidth, $newHeight, $option) |
2 |
{
|
3 |
|
4 |
switch ($option) |
5 |
{
|
6 |
case 'exact': |
7 |
$optimalWidth = $newWidth; |
8 |
$optimalHeight= $newHeight; |
9 |
break; |
10 |
case 'portrait': |
11 |
$optimalWidth = $this->getSizeByFixedHeight($newHeight); |
12 |
$optimalHeight= $newHeight; |
13 |
break; |
14 |
case 'landscape': |
15 |
$optimalWidth = $newWidth; |
16 |
$optimalHeight= $this->getSizeByFixedWidth($newWidth); |
17 |
break; |
18 |
case 'auto': |
19 |
$optionArray = $this->getSizeByAuto($newWidth, $newHeight); |
20 |
$optimalWidth = $optionArray['optimalWidth']; |
21 |
$optimalHeight = $optionArray['optimalHeight']; |
22 |
break; |
23 |
case 'crop': |
24 |
$optionArray = $this->getOptimalCrop($newWidth, $newHeight); |
25 |
$optimalWidth = $optionArray['optimalWidth']; |
26 |
$optimalHeight = $optionArray['optimalHeight']; |
27 |
break; |
28 |
}
|
29 |
return array('optimalWidth' => $optimalWidth, 'optimalHeight' => $optimalHeight); |
30 |
}
|
Langkah 9 Optimal dimensi
Kita sudah mendiskusikan empat metode ini. mereka hanya matematika dasar, benar, perhitungan paling cocok.
1 |
private function getSizeByFixedHeight($newHeight) |
2 |
{
|
3 |
$ratio = $this->width / $this->height; |
4 |
$newWidth = $newHeight * $ratio; |
5 |
return $newWidth; |
6 |
}
|
7 |
|
8 |
private function getSizeByFixedWidth($newWidth) |
9 |
{
|
10 |
$ratio = $this->height / $this->width; |
11 |
$newHeight = $newWidth * $ratio; |
12 |
return $newHeight; |
13 |
}
|
14 |
|
15 |
private function getSizeByAuto($newWidth, $newHeight) |
16 |
{
|
17 |
if ($this->height < $this->width) |
18 |
// *** Image to be resized is wider (landscape)
|
19 |
{
|
20 |
$optimalWidth = $newWidth; |
21 |
$optimalHeight= $this->getSizeByFixedWidth($newWidth); |
22 |
}
|
23 |
elseif ($this->height > $this->width) |
24 |
// *** Image to be resized is taller (portrait)
|
25 |
{
|
26 |
$optimalWidth = $this->getSizeByFixedHeight($newHeight); |
27 |
$optimalHeight= $newHeight; |
28 |
}
|
29 |
else
|
30 |
// *** Image to be resizerd is a square
|
31 |
{
|
32 |
if ($newHeight < $newWidth) { |
33 |
$optimalWidth = $newWidth; |
34 |
$optimalHeight= $this->getSizeByFixedWidth($newWidth); |
35 |
} else if ($newHeight > $newWidth) { |
36 |
$optimalWidth = $this->getSizeByFixedHeight($newHeight); |
37 |
$optimalHeight= $newHeight; |
38 |
} else { |
39 |
// *** Sqaure being resized to a square
|
40 |
$optimalWidth = $newWidth; |
41 |
$optimalHeight= $newHeight; |
42 |
}
|
43 |
}
|
44 |
|
45 |
return array('optimalWidth' => $optimalWidth, 'optimalHeight' => $optimalHeight); |
46 |
}
|
47 |
|
48 |
private function getOptimalCrop($newWidth, $newHeight) |
49 |
{
|
50 |
|
51 |
$heightRatio = $this->height / $newHeight; |
52 |
$widthRatio = $this->width / $newWidth; |
53 |
|
54 |
if ($heightRatio < $widthRatio) { |
55 |
$optimalRatio = $heightRatio; |
56 |
} else { |
57 |
$optimalRatio = $widthRatio; |
58 |
}
|
59 |
|
60 |
$optimalHeight = $this->height / $optimalRatio; |
61 |
$optimalWidth = $this->width / $optimalRatio; |
62 |
|
63 |
return array('optimalWidth' => $optimalWidth, 'optimalHeight' => $optimalHeight); |
64 |
}
|
Langkah 10 Memotong
Jika Anda memilih untuk memotong -, Anda telah menggunakan pilihan memotong, maka Anda memiliki salah satu langkah yang lebih sedikit. Kita akan memotong gambar dari
Pusat. pemotongan adalah proses yang sangat mirip untuk mengubah ukuran tetapi dengan beberapa lebih ukuran parameter berlalu dalam.
1 |
private function crop($optimalWidth, $optimalHeight, $newWidth, $newHeight) |
2 |
{
|
3 |
// *** Find center - this will be used for the crop
|
4 |
$cropStartX = ( $optimalWidth / 2) - ( $newWidth /2 ); |
5 |
$cropStartY = ( $optimalHeight/ 2) - ( $newHeight/2 ); |
6 |
|
7 |
$crop = $this->imageResized; |
8 |
//imagedestroy($this->imageResized);
|
9 |
|
10 |
// *** Now crop from center to exact requested size
|
11 |
$this->imageResized = imagecreatetruecolor($newWidth , $newHeight); |
12 |
imagecopyresampled($this->imageResized, $crop , 0, 0, $cropStartX, $cropStartY, $newWidth, $newHeight , $newWidth, $newHeight); |
13 |
}
|
Langkah 11 menyimpan gambar
Kami mendapatkan disana; hampir selesai. Sekarang saatnya untuk menyimpan gambar. Kami melewati jalan, dan kualitas gambar kita ingin mulai dari 0-100, 100 menjadi yang terbaik, dan memanggil metode yang tepat. Beberapa hal yang perlu diperhatikan tentang kualitas gambar: JPG menggunakan skala 0-100, 100 menjadi yang terbaik. Gambar GIF tidak memiliki setting kualitas gambar. PNG dilakukan, tapi mereka menggunakan skala 0-9, 0 menjadi yang terbaik. Ini tidak baik karena kita tidak bisa mengharapkan untuk diingat setiap kali kita ingin menyimpan gambar. Kami melakukan sedikit sihir untuk membakukan segalanya.
1 |
public function saveImage($savePath, $imageQuality="100") |
2 |
{
|
3 |
// *** Get extension
|
4 |
$extension = strrchr($savePath, '.'); |
5 |
$extension = strtolower($extension); |
6 |
|
7 |
switch($extension) |
8 |
{
|
9 |
case '.jpg': |
10 |
case '.jpeg': |
11 |
if (imagetypes() & IMG_JPG) { |
12 |
imagejpeg($this->imageResized, $savePath, $imageQuality); |
13 |
}
|
14 |
break; |
15 |
|
16 |
case '.gif': |
17 |
if (imagetypes() & IMG_GIF) { |
18 |
imagegif($this->imageResized, $savePath); |
19 |
}
|
20 |
break; |
21 |
|
22 |
case '.png': |
23 |
// *** Scale quality from 0-100 to 0-9
|
24 |
$scaleQuality = round(($imageQuality/100) * 9); |
25 |
|
26 |
// *** Invert quality setting as 0 is best, not 9
|
27 |
$invertScaleQuality = 9 - $scaleQuality; |
28 |
|
29 |
if (imagetypes() & IMG_PNG) { |
30 |
imagepng($this->imageResized, $savePath, $invertScaleQuality); |
31 |
}
|
32 |
break; |
33 |
|
34 |
// ... etc
|
35 |
|
36 |
default: |
37 |
// *** No extension - No save.
|
38 |
break; |
39 |
}
|
40 |
|
41 |
imagedestroy($this->imageResized); |
42 |
}
|
Sekarang juga adalah waktu yang baik untuk menghancurkan sumber daya gambar kami untuk membebaskan beberapa memori. Jika Anda menggunakan ini dalam produksi, juga mungkin ide yang baik untuk menangkap dan mengembalikan hasil dari gambar yang disimpan.
Kesimpulan
Nah itu saja, Terima kasih untuk mengikuti tutorial ini, saya harap ini berguna. Aku akan menghargai Tanggapan Anda, melalui komentar di bawah ini.
