Penjana Imej OG — Pembuat Imej Perkongsian Sosial

Imej Open Graph ialah gambar yang muncul apabila pautan ditampal ke dalam sembang, ciapan, atau saluran Slack — dan setiap platform yang memaparkannya menjangkakan kanvas sekitar 1200×630 piksel, saiz yang direka untuk kad og:image Facebook dan kad summary_large_image Twitter. Salah saiz, imej terpotong, kabur, atau tersepit; salah reka letak, tajuk terbaca sebagai secebis tulisan yang sukar dibaca bertindih foto sibuk. Alat ini menggubah imej pada resolusi sasaran sebenar menggunakan Canvas 2D API, supaya apa yang anda lihat dalam pratonton adalah grid piksel tepat yang akan terhasil dalam PNG.

Pilih latar belakang — warna pejal, kecerunan linear dua hentian yang dibina daripada dua warna pilihan anda, atau foto yang dimuat naik dan dipotong untuk memenuhi bingkai 1200×630 sepenuhnya sama seperti cara CSS background-size: cover berfungsi, bukannya diregang keluar dari perkadaran. Taip tajuk dan subtajuk pilihan: kedua-duanya diukur aksara demi aksara berdasarkan metrik fon kanvas sendiri, supaya tajuk utama yang terlalu panjang untuk muat dalam satu baris akan terbahagi kepada baris kedua atau ketiga pada sempadan perkataan sebenar dan bukannya terkeluar dari tepi atau terpotong secara tidak kelihatan. Pilih penjajaran tengah atau kiri, pilih warna teks yang mudah dibaca dengan latar belakang anda, dan letakkan logo pilihan di sudut pada saiz tetap yang boleh dibaca.

Di bawah kanvas, empat kad kecil menganggarkan bagaimana imej siap kelihatan setelah platform sebenar membalutnya dengan krom sendiri: kad Twitter/X hanya menunjukkan domain dan tajuk tebal di bawah imej tanpa baris penerangan, Facebook menambah jalur domain huruf besar di atas blok tajuk-dan-penerangan, LinkedIn meletakkan domain di bawah tajuk tanpa sebarang penerangan, dan embed Discord meletakkan domain, tajuk dan penerangan di atas imej dalam tema gelapnya sendiri. Ini adalah penganggaran bergaya untuk tujuan perancangan — dilabel dengan jelas sebagai ilustrasi, dengan baris domain yang anda taip sendiri — bukannya pengambilan langsung atau tangkapan skrin platform sebenar, kerana berkongsi pautan dan membiarkan perangkak setiap platform membaca tag meta og:image dan og:title sebenar dari halaman andalah yang menghasilkan kad langsung.

Semuanya dipaparkan secara setempat pada elemen kanvas HTML dalam pelayar anda: tajuk, subtajuk, latar belakang dan logo yang dimuat naik tidak pernah meninggalkan peranti anda, dan fail yang dieksport adalah PNG bersih canvas.toBlob() yang mengandungi hanya apa yang anda gubah — tiada sempadan olokan, bar pelayar palsu atau logo platform disertakan ke dalam imej yang dimuat turun. Jika anda perlu mengubah saiz atau menukar format PNG yang dieksport selepas itu, alat pengubah saiz imej dan penukar imej laman ini akan menyambung kerja dari titik ini.