Memproses Imej dalam CFML

Memproses Imej dalam CFML

Lucee menyediakan tag cfimage dan sekumpulan fungsi imej untuk membaca, mengubah saiz, memotong, memutar, dan menulis imej terus dalam CFML. Anda tidak memerlukan pustaka luaran kerana semuanya dibina di atas API imej Java yang tersedia dalam JVM. Artikel ini membimbing anda daripada membaca imej hingga watermark dan keselamatan muat naik.

Membaca dan Menulis Imej

Tag cfimage dengan action="read" membaca imej ke dalam pemboleh ubah, manakala action="write" menulisnya semula ke fail. Dalam skrip, fungsi imageRead dan imageWrite melakukan perkara yang sama:

gambar = imageRead("/aset/foto-asal.jpg");
imageWrite(gambar, "/aset/foto-baharu.png", true);

Fungsi imageRead menerima laluan pada cakera, laluan dalam memori, atau URL, jadi anda boleh membaca imej jauh terus. Fungsi imageWrite menentukan format keluaran daripada sambungan fail, jadi menukar .jpg kepada .png menukar format secara automatik. Gunakan imageInfo untuk membaca metadata imej seperti lebar, tinggi, dan format sebelum memprosesnya.

Fungsi Imej yang Lazim Digunakan

Lucee menyediakan fungsi imej yang lengkap, dan kebanyakan tindakan tag cfimage hanyalah pembungkus kepada fungsi-fungsi ini. Jadual berikut meringkaskan fungsi yang paling kerap digunakan dalam kerja harian:

Menggunakan fungsi secara terus dalam skrip biasanya lebih jelas daripada tag cfimage, kerana ia mengelakkan atribut action yang perlu diingat satu per satu.

Mengubah Saiz dan Memotong

Dua fungsi utama untuk mengubah saiz ialah imageResize, yang menetapkan lebar dan tinggi secara eksplisit, dan imageScaleToFit, yang memuatkan imej ke dalam kotak sempadan sambil mengekalkan nisbah aspek. Untuk thumbnail, imageScaleToFit ialah pilihan yang betul kerana ia tidak mengherotkan imej:

gambar = imageRead("/aset/foto-asal.jpg");
imageScaleToFit(gambar, 300, 200);
imageWrite(gambar, "/aset/foto-kecil.jpg", true);

Untuk memotong bahagian tertentu imej, guna imageCrop dengan titik asal dan saiz kawasan potongan:

gambar = imageRead("/aset/foto-asal.jpg");
imageCrop(gambar, 50, 50, 400, 300);
imageWrite(gambar, "/aset/foto-potong.jpg", true);

Kedua-dua imageResize dan imageScaleToFit menerima argumen interpolation pilihan untuk kaedah pensampelan semula, yang mempengaruhi ketajaman hasil apabila imej dikecilkan atau dibesarkan dengan ketara.

Memutar dan Menukar Format

imageRotate memutar imej mengikut darjah yang ditentukan, dengan pilihan titik pusat putaran. Tag cfimage dengan action="rotate" dan atribut angle melakukan perkara yang sama. Untuk menukar format, anda tidak perlu fungsi khas: tulis imej ke laluan dengan sambungan baharu, dan Lucee mengekodnya dalam format tersebut:

gambar = imageRead("/aset/foto.jpg");
imageRotate(gambar, 90);
imageWrite(gambar, "/aset/foto-putar.png", true);

Apabila menulis JPEG, atribut atau argumen quality mengawal tahap mampatan, dengan nilai pecahan antara 0 dan 1. Kualiti rendah menghasilkan fail lebih kecil tetapi dengan artifak mampatan yang lebih jelas, jadi pilih nilai yang seimbang untuk kegunaan web.

Tag cfimage dengan action="convert" dan atribut destination menawarkan laluan yang sama untuk mereka yang lebih suka sintaks tag, manakala atribut format memilih format paparan apabila anda menulis ke pelayar dengan action="writetobrowser". Secara lalai imej dipaparkan sebagai PNG jika format tidak dinyatakan.

Imej Kecil dan Cache

Menjana thumbnail pada setiap permintaan adalah pembaziran, kerana imej sumber jarang berubah. Jana thumbnail sekali, simpan ke cakera, dan gunakan semula pada permintaan berikutnya. Anda boleh menggabungkan ini dengan cache halaman supaya pemprosesan imej tidak berulang tanpa sebab:

function thumbnail(namaFail, lebar) {
    var laluanAsal = "/aset/" & namaFail;
    var laluanKecil = "/aset/kecil/" & namaFail;
    if (!fileExists(laluanKecil)) {
        var g = imageRead(laluanAsal);
        imageScaleToFit(g, lebar, "");
        imageWrite(g, laluanKecil, true);
    }
    return laluanKecil;
}

Pendekatan ini menjimatkan CPU dan mempercepatkan halaman dengan ketara, terutamanya pada galeri dengan banyak imej. Perbincangan lanjut tentang strategi cache boleh dibaca dalam panduan caching dan prestasi.

Imej Berasaskan Storan Luar

Apabila imej disimpan di luar cakera pelayan, Lucee menyokong S3 sebagai sistem fail maya, jadi anda boleh membaca imej daripada laluan berbentuk s3://baldi/laluan selepas menetapkan kelayakan S3 dalam Lucee Admin atau melalui this.s3 dalam Application.cfc. imageRead juga menerima URL biasa, yang berguna untuk imej pada CDN atau pelayan lain.

Untuk aplikasi yang mengasingkan storan daripada pengiraan, corak ini membolehkan pekerja memproses imej tanpa menyimpannya pada cakera tempatan, yang memudahkan penskalaan mendatar. Ia juga memudahkan sandaran dan perkongsian aset antara berbilang pelayan aplikasi, kerana imej tidak terikat kepada mana-mana tika pelayan tertentu.

Menulis Teks pada Imej untuk Watermark

Fungsi imageDrawText menulis teks pada imej pada koordinat tertentu, berguna untuk watermark hak cipta atau label produk. Anda menghantar imej, teks, koordinat x dan y, dan struktur attributeCollection untuk gaya fon:

gambar = imageRead("/aset/foto.jpg");
imageDrawText(gambar, "Hak Milik Kedai ABC", 20, 40, {
    font: "sans-serif",
    size: 24,
    style: "bold"
});
imageWrite(gambar, "/aset/foto-tanda-air.jpg", true);

attributeCollection menerima kunci gaya seperti font, size, dan style. Untuk watermark yang halus, gunakan saiz sederhana dan letakkan teks di sudut supaya ia tidak menutupi subjek utama imej.

Menjana CAPTCHA dengan cfimage

Tag cfimage juga boleh menjana imej CAPTCHA untuk mengesahkan pengguna manusia tanpa perkhidmatan luar. Atribut action="captcha" bersama text menentukan teks yang dipaparkan, difficulty mengawal tahap herotan, dan fonts menetapkan fon yang digunakan:

<cfimage action="captcha" text="A7K3Q" difficulty="medium"
    fontSize="28" width="180" height="60" name="captchaImg">

Anda kemudian menyimpan teks CAPTCHA dalam sesi dan membandingkannya dengan jawapan pengguna apabila borang dihantar. Ini ialah cara mudah menambah perlindungan terhadap penghantaran automatik, walaupun CAPTCHA berasaskan teks ringkas semakin mudah dipecahkan oleh alat moden.

Prestasi dan Memori untuk Imej Besar

Imej dimuatkan sepenuhnya ke dalam memori apabila dibaca, jadi imej yang sangat besar memakan banyak timbunan JVM. Memproses banyak imej besar secara serentak boleh menyebabkan tekanan memori dan akhirnya kegagalan OutOfMemory. Amalan baik ialah mengehadkan saiz imej yang diterima, memproses secara berurutan untuk kelompok besar, dan memantau penggunaan memori.

Untuk imej yang diterima daripada pengguna, kecilkan salinan asal sebaik sahaja dimuat naik supaya versi penuh resolusi tidak disimpan lama dalam memori. Apabila menulis semula imej yang dibaca, atribut nometadata membuang metadata asal seperti maklumat EXIF, yang mengurangkan saiz fail dan mengelak metadata sensitif seperti lokasi GPS bocor kepada pengguna lain. Pelarasan saiz timbunan JVM yang betul juga membantu, seperti yang dijelaskan dalam panduan tala JVM Lucee.

Keselamatan Fail Imej yang Dimuat Naik

Fail imej yang dimuat naik pengguna ialah vektor serangan yang serius. Menurut panduan OWASP File Upload, anda sepatutnya menyimpan fail di luar webroot dan menggunakan pengendali yang memetakan pengecam kepada fail, supaya fail yang dimuat naik tidak boleh diakses atau dilaksanakan secara terus. Namakan semula fail dengan rentetan rawak seperti UUID dan bukannya mengekalkan nama asal pengguna.

Selain itu, sahkan dengan senarai benarkan sambungan yang dibenarkan, semak jenis kandungan sebenar dan tandatangan fail, dan jangan sekali-kali mempercayai sambungan atau jenis kandungan yang dihantar pelayar semata-mata. Anda boleh menggunakan imageInfo untuk mengesahkan bahawa fail yang diterima benar-benar imej dan membaca dimensinya, kemudian menulis semula imej itu melalui imageWrite untuk membuang sebarang kandungan tersembunyi sebelum menyimpannya. Perbincangan penuh tentang muat naik selamat boleh dibaca dalam panduan muat naik fail yang selamat, dan pertahanan terhadap serangan web lain diliputi dalam panduan keselamatan aplikasi web CFML.

Soalan Lazim (FAQ)

Bagaimana cara membaca imej dalam CFML?

Guna fungsi imageRead dengan laluan fail atau URL, atau tag cfimage dengan action="read" dan atribut source serta name.

Bagaimana cara membuat thumbnail yang mengekalkan nisbah aspek?

Guna imageScaleToFit dengan lebar dan tinggi kotak sempadan, yang memuatkan imej ke dalam kotak itu tanpa mengherotkannya.

Bagaimana cara menukar format imej dalam CFML?

Tulis imej ke laluan dengan sambungan baharu menggunakan imageWrite, dan Lucee mengekodnya dalam format yang sepadan dengan sambungan itu.

Bagaimana cara menambah watermark pada imej?

Guna imageDrawText dengan imej, teks, koordinat x dan y, dan struktur attributeCollection untuk gaya fon.

Mengapa imej besar melambatkan aplikasi saya?

Imej dimuatkan sepenuhnya ke dalam memori, jadi imej besar memakan timbunan JVM dan CPU semasa pemprosesan, terutamanya apabila banyak diproses serentak.

Sumber

• cfimage, docs.lucee.org
• ImageRead(), docs.lucee.org
• ImageResize(), docs.lucee.org
• ImageScaleToFit(), docs.lucee.org
• ImageDrawText(), docs.lucee.org
• File Upload Cheat Sheet, OWASP