Menggambar grafik php. Membuat grafik di PHP. Mari kita tingkatkan kode PHP
Untuk mengidentifikasi penggunaan alat grafis dalam skenario web, pertimbangkan rangkaian kemungkinan kasus penggunaan grafis berikut:
- Gambar statis, dibuat secara mandiri atau dipinjam dari suatu tempat, dapat disematkan ke dalam halaman HTML.
- Gambar yang dihasilkan secara terprogram (HTML + CSS) dapat digunakan.
- Anda dapat menggunakan perpustakaan gd untuk membuat grafik statis terlebih dahulu untuk semua kemungkinan situasi yang muncul selama eksekusi skrip, menyimpannya dalam file, dan menampilkannya secara kondisional.
Kami tidak akan mempertimbangkan opsi untuk mengimplementasikan grafik menggunakan gambar statis karena kesederhanaannya, jadi pertama-tama kami akan mempertimbangkan opsi sederhana (grafik HTML + CSS), dan kemudian kami akan mempertimbangkan untuk menggunakan perpustakaan gd di PHP.
Grafik HTML + CSSPengunjung situs web sudah familiar dengan grafik batang horizontal dengan sisi berwarna, yang sering digunakan untuk mengilustrasikan hasil survei. Sekilas, sepertinya ada semacam alat grafis yang digunakan untuk membuat diagram seperti itu, namun kenyataannya, menggunakan beberapa skrip sederhana saja sudah cukup:
Bekerja dengan grafik dalam gaya PHP, HTML, CSS /* CSS yang membentuk desain */ body div ( tinggi: 1em; tampilan: blok-inline; perataan vertikal: tengah ) rentang ( tampilan: blok-inline; lebar: 120px ) .orange ( latar belakang: oranye ) .apple ( latar belakang: #33CC66 ) .banana ( latar belakang: kuning ) .tomato ( latar belakang: merah ) .cucumber ( latar belakang: hijau ) .potato ( latar belakang: abu-abu ) Formulir pemesanan Buah-buahan Jeruk Apel Pisang Sayuran Tomat Mentimun Kentang
Contoh ini tidak mendemonstrasikan fitur-fitur baru PHP, namun hanya menunjukkan cara sederhana untuk membuat grafik menggunakan HTML dan CSS (dalam hal ini diagram batang):
Alat grafik yang dijelaskan di bagian sebelumnya secara praktis menghabiskan kemampuan kode HTML standar (walaupun perlu dicatat bahwa kami tidak membahas alat pembuatan grafik HTML5 Canvas yang cukup kuat). Sekarang mari kita beralih ke menjelaskan metode untuk membuat grafik yang benar-benar arbitrer menggunakan perpustakaan gd.
Deskripsi umum perpustakaan gdSecara umum, gd toolkit adalah pustaka kode C untuk membuat dan memanipulasi gambar. Perpustakaan ini awalnya dikembangkan dan disediakan untuk umum oleh karyawan Boutell.com yang berbakat dan murah hati.
Pustaka gd sendiri bukanlah program grafik atau gambar, juga bukan merupakan aplikasi mandiri atau antarmuka pengguna grafis. Sebaliknya, perpustakaan gd menyediakan fungsi yang dapat dipanggil oleh program apa pun untuk melakukan manipulasi gambar yang diinginkan. Ini berarti perpustakaan gd dapat ditautkan ke program C apa pun yang memerlukan penggunaan kode perpustakaan ini. Masalah inilah yang dipecahkan oleh pengembang sistem PHP.
Faktanya, serangkaian fungsi antarmuka telah ditulis untuk tujuan ini yang memudahkan pemanggilan prosedur gd dari skrip PHP. Namun perpustakaan gd sendiri tidak berisi kode khusus PHP, dan antarmuka telah dikembangkan untuk memungkinkan perpustakaan diakses dari beberapa bahasa pemrograman dan lingkungan pemrograman lain, termasuk Perl, Pascal, Haskell, dan REXX.
Pustaka gd memungkinkan Anda memanggil fungsi untuk membuat gambar sumber (awalnya kosong, menyerupai selembar kertas kosong), menggambar dan menggambar di dalam gambar sumber tersebut dengan berbagai cara, dan pada akhirnya mengonversi gambar dari format gambar internal gd ke format standar. format gambar, lalu kirimkan ke tujuan akhir (output di jendela browser atau simpan dalam file atau database). Dan karena semua operasi ini dilakukan di bawah kendali program, dan tidak dilakukan secara manual, gambar yang dibuat dapat menjadi serumit yang diinginkan dan bergantung pada situasi apa pun selama pelaksanaan program yang diinginkan untuk menjadikannya bergantung.
Format gambarPustaka gd pada dasarnya memungkinkan Anda mengimpor dan mengekspor gambar menggunakan berbagai format. Format gambar yang paling populer adalah GIF, JPEG, dan PNG, meskipun contoh yang digunakan sebagian besar menggunakan format gambar terakhir.
Format GIF dan PNG dimaksudkan untuk mendeskripsikan kisi elemen berwarna yang sesuai dengan piksel, dengan beberapa tambahan. Penambahan pertama adalah sel dapat memuat nomor warna sebenarnya atau indeks ke dalam tabel nomor warna. (Opsi pertama memungkinkan Anda membuat gambar yang lebih ekspresif, karena memungkinkan Anda memberikan sejumlah warna berbeda, dan opsi terakhir membantu Anda membuat gambar lebih ringkas.)
Penambahan kedua adalah sebagai berikut. Tentu saja representasi konseptual format GIF dan PNG cukup sederhana, namun dalam praktiknya, membaca, menulis, dan mengirimkan gambar dalam format tersebut selalu dilakukan dalam bentuk terkompresi. Kompresi diperlukan karena menyimpan data yang direpresentasikan sebagai kisi-kisi sel memerlukan sejumlah besar memori. Gambar sederhana berukuran 500x400 piksel berisi 200.000 piksel, dan jika setiap piksel memerlukan tiga byte, jumlah memori yang diperlukan sudah lebih dari setengah megabyte.
Topik kompresi adalah topik yang luas dan kompleks, namun sebagian besar algoritma kompresi didasarkan pada pengurangan redundansi gambar untuk mengurangi ukurannya. (Misalnya, dibutuhkan lebih sedikit ruang memori untuk menentukan bahwa setiap piksel dalam gambar berwarna hijau daripada menentukan nilai hijau untuk setiap piksel satu per satu.) Sayangnya, algoritma kompresi tidak bergantung pada penggunaan properti ini karena mereka harus memutuskan hal tersebut. masalah kompleks sehingga metode untuk memecahkan masalah ini, yang diterapkan dalam algoritma kompresi yang digunakan untuk menghasilkan gambar dalam format GIF, bahkan telah dipatenkan.
Menginstal perpustakaanSejujurnya, tugas menginstal perpustakaan gd dan membuatnya bekerja dengan sukses bersama dengan sistem PHP cukup rumit. Hal ini bukan disebabkan oleh kekurangan apa pun pada perangkat lunak PHP atau gd, namun sepenuhnya disebabkan oleh masalah konfigurasi; khususnya, Anda perlu memahami di mana perpustakaan gd seharusnya berada dan sebenarnya berada, dan memastikan bahwa langkah kompilasi dan penautan semua executable diselesaikan dengan benar. Oleh karena itu, situasi terbaik yang mungkin terjadi adalah pengguna menemukan bahwa perpustakaan gd telah terinstal dan dukungan gd telah diaktifkan dalam sistem PHP (baik milik perusahaan web hosting atau karena disertakan dalam sistem PHP yang terinstal).
Oleh karena itu, instalasi perpustakaan gd harus dimulai dari langkah nol - dengan memeriksa apakah perpustakaan ini sudah diinstal. Pertama, masukkan kode berikut ke dalam file skrip Anda dan lihat hasil menjalankannya di browser Anda, apakah skrip Anda dijalankan oleh perusahaan web hosting Anda atau dijalankan seluruhnya oleh instalasi Anda sendiri:
Setelah menampilkan halaman ini di layar, cukup cari string teks "gd" di jendela browser. Ini akan menampilkan subbagian yang menjelaskan sejauh mana instalasi PHP Anda mengizinkan dukungan untuk perpustakaan gd. Jika Anda hanya ingin menyiapkan jenis gambar tertentu (misalnya PNG), dan hasil fungsi phpinfo() menunjukkan bahwa dukungan untuk jenis gambar tersebut diaktifkan, Anda dapat segera memulai. Dan jika informasi versi gd menyertakan kata "bundled", maka perpustakaan gd yang disertakan dengan PHP akan digunakan.
Jika upaya untuk menemukan penyebutan perpustakaan gd berakhir dengan kegagalan, dan Anda menginstal PHP sendiri, maka Anda dapat menginstal dan mengkonfigurasi konfigurasi perpustakaan gd. (Sebaliknya, jika instalasi PHP Anda ditangani oleh perusahaan hosting Anda, satu-satunya pilihan Anda adalah meminta perusahaan tersebut untuk memberikan dukungan untuk perpustakaan gd, atau menggunakan perusahaan hosting web lain.)
Menggunakan perpustakaan gd yang disertakan dengan PHP menghilangkan banyak kerumitan yang terkait dengan instalasi gd, tapi tidak semua. Faktanya adalah bahwa menggunakan versi itu sendiri yang disertakan dalam kit distribusi memungkinkan Anda mendapatkan perpustakaan gd, tetapi belum tentu semua perpustakaan yang diperlukan agar gd dapat berfungsi. Pustaka gd sendiri bergantung pada beberapa pustaka lain: libpng (untuk memanipulasi gambar PNG), zlib (untuk kompresi), dan jpeg-6b atau lebih baru (untuk memanipulasi gambar JPEG jika diperlukan). Pustaka ini sudah ada di banyak instalasi Linux, dalam hal ini mungkin cukup untuk menyertakan opsi with yang diperlukan (seperti --with-zlib) dalam opsi tanpa menentukan direktori instalasi. Jika Anda melakukan konfigurasi PHP sendiri, Anda cukup menambahkan opsi --with-gd untuk memastikan bahwa versi gd yang disertakan disertakan dalam file yang dapat dieksekusi. Dan jika Anda ingin menunjuk ke versi lain, gunakan opsi --with-gd=path sebagai gantinya.
Jika Anda menemukan satu atau lebih perpustakaan yang diperlukan tidak ada, ini berarti perpustakaan tersebut harus dibangun secara terpisah. Untuk informasi tentang di mana menemukan versi terkini, Anda dapat memulai dengan meninjau dokumentasi yang terdapat di www.libgd.org.
Prinsip dasar bekerja dengan perpustakaan gdKetika sebuah gambar dibuat atau dimanipulasi menggunakan toolkit gd, gambar tersebut direpresentasikan dalam format gd khusus yang tidak memiliki korespondensi dengan jenis gambar konvensional apa pun. Secara teoritis dimungkinkan untuk mengekspor gambar dalam format gd ini, tetapi operasi seperti itu jarang digunakan karena gambar yang dihasilkan tidak dikompresi dan tidak dapat ditampilkan di browser atau program grafis sederhana.
Gambar yang diproses menggunakan toolkit gd dicirikan oleh informasi tentang lebar, tinggi, dan warna semua piksel, yang jumlahnya sama dengan hasil kali lebar dan tinggi. Biasanya, sebuah program memulai interaksinya dengan perpustakaan gd dengan membuat gambar kosong baru (untuk menggambar dan menggambar), atau dengan mengimpor gambar dari file. Langkah-langkah berikut biasanya dilakukan: pertama, pendistribusian warna pada gambar, kedua, menggambar dan melukis atau memanipulasi gambar menggunakan beberapa operasi lain, ketiga, mengubah gambar ke dalam format yang diterima secara umum (misalnya PNG atau JPEG ) dan memindahkannya ke tujuannya.
Representasi warnaAda dua cara untuk merepresentasikan warna dalam gambar gd: representasi berbasis palet, yang dibatasi hingga 256 warna, dan representasi warna sebenarnya, yang memungkinkan Anda menentukan sejumlah nomor warna RBG yang berbeda dalam jumlah sembarang. Di gd 1.x, satu-satunya pilihan adalah menggunakan warna berbasis palet, tetapi di gd 2.x dan versi perpustakaan ini yang disertakan dengan PHP, dimungkinkan untuk membuat gambar berbasis palet dan gambar dalam warna realistis. Satu hal yang perlu diingat adalah bahwa setiap gambar gd harus berbasis palet atau memiliki warna yang nyata (RGB); ini berarti tidak ada pilihan untuk memasukkan warna realistis ke dalam gambar berdasarkan palet.
Untuk mendapatkan gambar kosong asli berdasarkan palet, Anda perlu memanggil fungsi ImageCreate(), dan untuk mendapatkan gambar dalam warna asli, gunakan fungsi ImageCreateTrueColor().
Gambar berbasis paletWarna ditentukan dalam format Merah-Hijau-Biru (RGB), menggunakan tiga angka dari 0 hingga 255. Misalnya, warna yang ditentukan oleh angka (255, 0, 0) adalah merah cerah, warna (0, 255, 0) - hijau, warna (0, 0, 255) - biru, warna (0, 0, 0) - hitam, warna (255, 255, 255) - putih dan warna (127, 127, 127) - abu-abu. Dengan menciptakan lebih banyak warna baru, Anda dapat memilih nilai dari ketiga komponen warna secara sewenang-wenang.
Setiap gambar pada suatu gambar harus dibuat dengan warna tertentu, dan warna tersebut harus didistribusikan pada gambar sebelum digunakan. Selain itu, warna pertama yang didistribusikan pada gambar secara otomatis menjadi warna latar belakang. Jadi, Anda tidak boleh berasumsi bahwa Anda dapat melakukannya tanpa menentukan warna, dan biasanya operasi pendistribusian warna adalah operasi pertama setelah membuat gambar kosong baru.
Warna dalam gambar berbasis palet dibuat menggunakan fungsi imagecolorallocation(), yang mengambil parameter gambar (yang dibuat sebelumnya) dan tiga bilangan bulat yang menentukan proporsi merah, hijau, dan biru. Nilai yang dikembalikan adalah bilangan bulat yang menentukan indeks warna baru di palet internal gambar. Nilai kembalian ini harus ditetapkan ke variabel karena nilai indeks yang ditentukan diperlukan untuk melakukan semua operasi di masa depan menggunakan warna ini.
Gambar berbasis palet dapat memiliki jumlah warna maksimum 256. (Pembaca mungkin tertarik atau tidak tertarik dengan dasar gambar tersebut, namun setiap piksel dalam gambar berbasis palet sebenarnya adalah satu byte yang menyimpan indeks dari satu elemen dalam palet 256 warna.)
Perhatikan bahwa indeks yang dikembalikan saat mendistribusikan salah satu warna dalam gambar hanya bermakna untuk gambar tersebut. Misalnya, jika skrip PHP menetapkan $black ke warna yang didistribusikan dalam satu gambar, maka tidak masuk akal untuk menggunakan variabel tersebut sebagai masukan warna ke perintah gambar yang dipanggil untuk memproses gambar lain.
Gambar dengan warna realistisgd 2.0 dan yang lebih baru juga menyediakan kemampuan untuk membuat gambar berbasis non-palet di mana setiap piksel menyimpan nomor warna RGB yang berubah-ubah. Dalam apa yang disebut format warna asli ini, jumlah kemungkinan warna sangatlah banyak. Fitur ini tidak hanya memperluas cakupan ekspresi artistik tanpa batas, namun juga memungkinkan Anda mereproduksi gambar PNG dan JPEG dengan warna nyata yang dimasukkan ke dalam memori menggunakan toolkit gd.
Kecuali fungsi yang berbeda digunakan untuk membuat gambar awal dan tidak ada batasan dalam memilih warna yang berbeda, prinsip bekerja dengan gambar warna asli serupa dengan gambar berbasis palet.
Secara khusus, Anda masih dapat memanggil ImageColorAllocation() untuk membuat warna baru dan menetapkan nilai kembalian ke variabel untuk digunakan nanti dalam perintah menggambar. Satu-satunya perbedaan adalah nilai yang dikembalikan adalah nomor warna RGB, bukan indeks elemen dalam palet. Selain itu, pada gambar dengan warna yang nyata, tidak ada konsep warna latar belakang yang dibuat sebagai efek samping dari fungsi ImageColorAllocation(); Sebagai hasil inisialisasi, semua piksel diberi warna hitam (0, 0, 0).
TransparansiVersi gd 2.x mendukung konsep transparansi. Ini menggunakan saluran alfa (selain nilai merah, hijau, dan biru) untuk menunjukkan seberapa transparan warnanya. Hal ini memungkinkan, misalnya, satu bentuk ditumpangkan pada bentuk lain sehingga bentuk pertama tetap terlihat sebagian, bukannya tumpang tindih seluruhnya dengan bentuk kedua.
Dalam PHP, banyak fungsi untuk bekerja dengan gambar memiliki analog yang mengandung kata "alpha" pada namanya, yang menunjukkan bahwa dalam fungsi ini warna diwakili oleh empat nilai (R, G, B, A). Misalnya, fungsi imageColorAllocation() memerlukan tiga parameter, dan saat memanggil fungsi ImageColorAllocationAlpha(), Anda harus menentukan parameter keempat dengan nilai antara 0 dan 127. Nilai nol menunjukkan bahwa warna benar-benar buram, dan nilai angka 127 menunjukkan bahwa warnanya benar-benar buram
Koordinat dan gambar perintahSetelah membuat gambar menggunakan toolkit gd, sistem koordinat dibuat secara implisit yang memungkinkan Anda menentukan perintah gambar di dalamnya. Nilai koordinat pembatas dalam sistem ini ditentukan oleh parameter lebar dan tinggi gambar yang ditentukan.
Titik asal koordinat pada sistem ini, sesuai dengan koordinat (0, 0), terletak di pojok kiri atas gambar. Arah positif untuk nilai X adalah dari kiri ke kanan, dan untuk nilai Y dari atas ke bawah. (Dalam sistem koordinat grafis komputer, lokasi titik asal ini umum terjadi, namun mereka yang telah mempelajari geometri analitik tampaknya terbiasa dengan titik asal yang berada di sudut kiri bawah diagram.)
Jumlah perintah menggambar sangat banyak. Perintah ini mencakup, namun tidak terbatas pada, perintah untuk menggambar segmen garis, persegi panjang, dan busur, serta perintah untuk mengatur nilai piksel tertentu. Namun perlu diingat bahwa hasil akhir dari semua perintah menggambar dan membuat plot ini adalah menetapkan nilai piksel. Setelah menjalankan perintah yang mengubah nilai piksel, tidak ada jejak yang tersisa di memori (selain nilai yang diubah itu sendiri), jadi tidak ada cara untuk mengesampingkan perintah menggambar dan merencanakan atau menyajikan hasil dari perintah yang berbeda secara terpisah.
Tidak ada yang mencegah perintah menggambar yang melampaui gambar yang ditentukan, tetapi gambar tersebut tidak memiliki efek yang terlihat. Misalnya, persegi panjang tidak akan terlihat pada gambar jika semua nilai koordinatnya negatif.
Konversi formatSemua operasi menggambar dan manipulasi gambar dilakukan pada gambar yang direpresentasikan dalam format gd internal. Dan setelah operasi ini selesai, skrip dapat memanggil salah satu perintah konversi dan keluaran (imagepng, imagetjpeg, dll.) untuk mengonversi gambar ini ke dalam format grafik yang diperlukan dan menampilkannya ke jendela browser pengguna (atau ke file).
Membebaskan sumber dayaSetelah hasil konversi gambar gd yang telah selesai ditransfer ke pengguna, kami dapat menganggap bahwa pekerjaan dengan versi internal telah selesai. Artinya versi ini harus dimusnahkan. Cara yang benar untuk melakukan ini adalah dengan memanggil imagedestroy() dengan gambar sebagai parameter.
fungsi perpustakaan gdKami tidak akan mencantumkan dan menjelaskan secara terpisah dalam artikel ini semua fungsi yang disediakan di antarmuka gd penerjemah PHP. Untuk memahami informasi ini, kami menyarankan Anda menggunakan bagian “Pemrosesan dan Pembuatan Gambar” di manual php.net. Sebagian besar fungsi gd termasuk dalam salah satu kategori yang ditunjukkan pada tabel di bawah. Perhatikan bahwa nama fungsi yang tercantum dalam tabel ini menggunakan huruf kapital agar huruf pertama setiap kata lebih mudah dibaca, namun kondisi ini tidak selalu diamati dalam contoh kode karena nama fungsi PHP tidak peka huruf besar-kecil:
Klasifikasi fungsi gd| Fungsi pembuatan gambar | ImageCreate(), ImageCreateTruecolor(), ImageCreateFromGd(), ImageCreateFromJpeg() | Kembalikan gambar gd baru. Fungsi ImageCreate() mengambil parameter lebar dan tinggi gambar, dan parameter fungsi lainnya adalah jalur file, URL, atau string yang berisi gambar yang dibuat sebelumnya yang harus dimuat dan dikonversi ke format gd |
| Fungsi yang melakukan operasi distribusi warna | ImageColorAllocation(), ImageColorAllocationAlpha(), ImageColorDeallocation() | Fungsi ImageColorAllocation() mengambil pegangan gambar dan nilai merah, hijau, dan biru yang diperlukan sebagai parameter, lalu mengembalikan nomor warna untuk digunakan nanti dalam operasi menggambar dan membuat plot. Fungsi ImageColorAllocationAlpha menerima parameter tambahan - koefisien transparansi (0-127) |
| Fungsi yang melakukan operasi pencocokan warna | ImageColorClosest(), ImageColorClosestAlpha(), ImageColorExact(), ImageColorExactAlpha() | Kembalikan indeks warna yang cocok pada gambar palet. Fungsi yang mengandung kata "Terdekat" dalam namanya mengembalikan warna yang paling cocok (akurasi pencocokan diukur sebagai jarak antar titik dalam ruang nilai RGB); fungsi dengan sebutan "Tepat" mengembalikan nomor warna hanya jika identik dengan yang dicari, jika tidak maka akan mengembalikan nilai -1, fungsi dengan nama "Alpha" beroperasi pada warna, yang ditentukan menggunakan empat nilai (dengan warna transparan) |
| Fungsi menggambar garis | ImageLine(), ImageDashedLine(), ImageRectangle(), ImagePolygon(), ImageEllipse(), ImageArc() | Mereka digunakan untuk menggambar segmen lurus atau kurva dengan bentuk tertentu. Biasanya, parameter pertama dari masing-masing fungsi ini adalah gambar, parameter terakhir adalah warna, dan parameter perantara adalah koordinat X dan Y. |
| Fungsi pemasangan pena gambar garis | ImageSetStyle(), ImageSetThickness() | Mengubah pengaturan yang mempengaruhi karakteristik garis yang dihasilkan oleh perintah menggambar garis berikutnya (beberapa fungsi ini hanya berlaku untuk gd 2.0.1 atau versi yang lebih baru) |
| Fungsi menggambar dan mengisi | ImageFilledRectangle(), ImageFilledEllipse(), ImageFilledPolygon(), ImageFilledArc(), ImageFill() | Biasanya, fungsinya mirip dengan menggambar garis, tetapi fungsinya tidak hanya untuk menggambar kontur area, tetapi juga untuk mengisi area yang dibuat dengan warna. Fungsi khusus ImageFill() melakukan operasi pengisian menggunakan warna isian tertentu. Pengisian dilakukan ke segala arah dimulai dari koordinat XY yang ditentukan (beberapa fitur ini memerlukan gd 2.0.1 atau lebih baru) |
| Fungsi untuk bekerja dengan teks | ImageString(), ImageLoadFont() | Fungsi ImageString mengambil parameter pegangan gambar, nomor font, koordinat X dan Y, string teks, dan warna. Jika nomor font antara 1 dan 5, maka salah satu dari lima font bawaan digunakan untuk menampilkan garis dalam warna ini. Sebaliknya, nomor font yang lebih besar dari 5 menunjukkan hasil pemuatan font khusus menggunakan fungsi ImageLoadFont() |
| Fungsi ekspor | GambarPng(), GambarJpeg() | Ubah gambar gd internal menjadi gambar dengan format yang sesuai, lalu kirimkan gambar ini ke aliran keluaran. Jika hanya satu parameter yang ditentukan (pegangan gambar), maka gambar akan di-echo ke pengguna, dan jika parameter tambahan digunakan, yaitu jalur file, tujuan aliran keluaran menjadi file |
| Fungsi penghancuran gambar | Penghancuran Gambar() | Mengambil pegangan gambar sebagai parameter dan melepaskan semua sumber daya yang terkait dengan gambar tersebut |
Agar suatu gambar dapat disajikan dengan baik di browser pengguna, perlu ditentukan dari mana gambar tersebut berasal dan apa formatnya. Oleh karena itu, sayangnya, tidak mungkin untuk hanya mengimplementasikan, misalnya, panggilan ke fungsi imageToPng() dalam file HTML yang dihasilkan dan dengan demikian menyelesaikan masalah tampilan gambar. Intinya, Anda harus menyisipkan kode keluaran gambar dengan kode HTML yang dihasilkan dalam skrip PHP, dan untuk melakukannya Anda dapat menggunakan salah satu dari tiga opsi yang dijelaskan di bawah.
Membuat Gambar Halaman PenuhSeluruh halaman yang dihasilkan dapat diformat sebagai gambar. Dalam hal ini, Anda perlu meneruskan header HTTP sebelum data gambar, sehingga menyatakan bahwa yang berikut ini adalah gambar dengan tipe tertentu. Misalnya, di akhir skrip, baris berikut mungkin diberikan:
// ... kode yang membuat gambar dan menugaskannya // ke variabel $image header("Content-type: image/png"); // Menampilkan judul di browser imagepng($image); // Meneruskan data gambar itu sendiri, dikonversi ke format PNG imagedestroy($image); // Lepaskan sumber daya
Keuntungan pendekatan ini adalah informasi apa pun, termasuk parameter POST, dapat digunakan untuk menyampaikan instruksi tentang komposisi gambar masa depan. Kelemahannya adalah halaman yang dihasilkan tidak dapat berisi kode HTML biasa. Bahkan, Anda bahkan harus berhati-hati untuk tidak mengirimkan keluaran teks apa pun sebelum judul dan gambar di skrip Anda, karena ini sama saja dengan mengirimkan konten sebelum waktunya. Dalam kasus ini, pesan kesalahan "Header sudah terkirim..." muncul.
Menyematkan gambar yang disimpan dalam filePertama-tama, perhatikan bahwa HTML mendukung deskriptor , yang memungkinkan Anda menyematkan gambar dengan menentukan jalur atau URL file gambar, seperti pada contoh berikut:
Desain ini berlaku untuk file gambar statis, namun tidak ada alasan mengapa desain ini tidak dapat mengaktifkan penyematan gambar yang baru dibuat. Oleh karena itu, Anda dapat menyiapkan skrip di mana gambar pertama kali dibuat, kemudian data gambar ditulis ke file lokal, dan kemudian kode HTML dengan deskriptor yang sesuai dibuat. , menunjuk ke file yang baru dibuat.
Satu-satunya kelemahan dari pendekatan ini adalah, pertama, proses pembuatan halaman harus mencakup penulisan file, yang dapat memakan waktu, dan, kedua, Anda harus menentukan apa yang harus dilakukan dengan file tersebut setelah Anda selesai menggunakannya.
Namun dalam situasi tertentu pendekatan ini ideal. Ini tentang membuat dan menyimpan gambar dalam cache yang mewakili serangkaian pilihan terbatas. Dalam hal ini, ada cara khusus untuk mengasosiasikan situasi tertentu dengan nama file gambar. Ketika beberapa situasi ini muncul yang memerlukan gambar untuk dikeluarkan, gambar tersebut diperiksa untuk melihat apakah file terkait sudah ada. Jika jawabannya ya, tautan ke file ini hanya diterapkan, diformat sebagai deskriptor , dan jika jawabannya tidak, maka gambar dibuat, ditulis ke file, dan kemudian tautan ke gambar ini diterapkan lagi. Pada akhirnya, membuat file baru tidak diperlukan lagi.
Terakhir, tidak ada alasan mengapa Anda tidak dapat menyediakan skrip gambar mandiri dan kemudian menyematkan gambar yang dihasilkan di halaman dinamis yang dihasilkan oleh skrip lain dengan menentukan di deskriptor URL skrip ini. Satu-satunya kesulitan adalah memilih cara mentransfer data yang diperlukan ke halaman dependen. Misalnya, pegangan yang menunjukkan gambar tersemat mungkin terlihat seperti ini:
Dalam hal ini, skrip ballpage.php mengembalikan gambar PNG berupa bola berwarna yang terletak di berbagai posisi dalam gambar.
Namun penggunaan pendekatan ini dapat menimbulkan masalah karena server web dan browser terkadang memeriksa sufiks file yang sedang diproses dan, ketika mereka menerima hasil pemeriksaan, bereaksi berbeda terhadapnya. Misalnya, skrip rendering ballpage mungkin perlu diberi ekstensi .php agar server Apache dapat menentukan bahwa kode server harus ditafsirkan sebagai kode PHP (walaupun mode pemrosesan yang diperlukan juga dapat ditentukan melalui file konfigurasi).
Namun, ada juga browser versi non-standar yang tidak memperhitungkan kemungkinan bahwa file dengan ekstensi .php menghasilkan gambar, meskipun header yang dilewati menunjukkan bahwa ada gambar yang mengikutinya. Oleh karena itu, saat menggunakan metode ini, Anda perlu menguji skrip di browser yang berbeda dan memastikan bahwa kalangan pengguna yang dituju akan menerima halaman dalam bentuk yang Anda inginkan.
Di bawah ini adalah contoh penggunaan perpustakaan gd untuk membuat gambar.
Contoh penggunaan perpustakaan gd: membuat bentuk sederhanaDalam contoh berikut kami akan menunjukkan cara menggunakan perpustakaan gd untuk menghasilkan gambar yang berisi bentuk geometris sederhana:
Apa yang telah kita ubah?
- Sekarang, karena kita memiliki beberapa jenis grafik, jenis grafik tersebut akan diteruskan kepada kita melalui $_GET. Sama dengan $Bulan dan $Jam dan $Tahun;
- Selanjutnya, kita membuat array $MonthNames, yang akan berisi nama-nama bulan. Karena array dimulai dari nol, elemen pertama adalah null;
- Sekarang, bergantung pada jenisnya, variabel $Query, $ResultArray, $ChartHeading, dan $XAsixName ditetapkan di switch. Jika $Type tidak disetel, bulan akan ditampilkan secara default;
- Selanjutnya, kita terhubung ke database, menjalankan permintaan, menyalin hasilnya ke dalam array dan menghasilkan bagian pertama dari file xml;
- Selanjutnya, kita membuat badan file XML. Karena isi grafik bergantung pada tipe grafik, kita menggunakan switch lagi;
- Bulan: semuanya sama kecuali tautannya. Sekarang akan menjadi seperti ini: newchart-xmlurl-get-data.php; newchart - menunjukkan bahwa kita sedang membuat grafik baru, xmlurl - di alamat mana untuk mencari data. Segala sesuatu yang berikut ini adalah bagian dari URL. Berikut ini tautan lengkap ke bulan Januari: newchart-xmlurl-get-data.php?type=hourly&Year=2010&Month=1
- Hari: hal yang sama berlaku untuk bulan tersebut, tetapi URL sekarang berisi informasi terkait hari;
- Jam: jika kita tidak ingin orang lain mengikuti bagan ini, kita tidak menetapkan URL untuk bagan tersebut;
- Pada akhirnya, tutup XML;
Simpan file ini sebagai get-data.php; Sekarang buka browser Anda dan uji skripnya. Misalnya: http://localhost/fcdemo/get-data.php?year=2010
Anda akan melihat sesuatu seperti ini:
Tes
Kita sekarang sudah selesai dengan diagramnya. Untuk memeriksa operasinya, buka http://localhost/fcdemo/demo.html
Jika Anda melakukan semuanya dengan benar, Anda akan melihat diagram Kolom3D di halaman. Jika Anda mengklik salah satu kolom, grafik baru akan terbuka. Dan seterusnya…
Jika Anda telah mempelajari pelajaran ini dengan cermat, kemungkinan besar Anda sudah memiliki pemahaman umum tentang diagram terhubung di PHP/MySQL. Diagram yang persis sama dapat dibuat untuk statistik berikut:
- Jumlah penjualan selama periode waktu tertentu;
- Berapa kali situs web Anda berhenti berfungsi?
- Jumlah pengunjung ke halaman individual;
Struktur diagram akan sama untuk topik apa pun. Gunakan beberapa parameter untuk mengambil informasi dari database, lalu ubah responsnya menjadi XML dan selesai, diagram sudah siap!
Untuk inspirasi lebih lanjut, Anda dapat mengunjungi halaman demo ini. Terima kasih atas perhatian Anda!
