Penjana Imej OG — Pembuat Imej Kongsi Sosial
Karang imej perkongsian sosial Graf Terbuka 1200×630 dengan tajuk, sari kata, latar belakang dan logo, dipaparkan secara langsung pada kanvas sebenar — kemudian pratonton bagaimana ia kelihatan dibingkai dalam kad pautan Twitter/X, Facebook, LinkedIn dan Discord sebelum anda memuat turun PNG yang bersih.
Hasilnya
Imej Graf Terbuka ialah gambar yang muncul apabila pautan ditampal ke dalam sembang, tweet atau saluran Slack — dan setiap platform yang menyebabkan seseorang menjangkakan kanvas kira-kira 1200×630 piksel, saiz Facebook og:image dan kad summary_large_image Twitter kedua-duanya direka bentuk. Dapatkan saiz yang salah dan imej keluar dipotong, kabur atau diperah; silap susun atur dan tajuknya berbunyi sebagai sekerat yang tidak boleh dibaca berbanding foto yang sibuk. Alat ini mengarang imej pada peleraian sasaran sebenar menggunakan API Kanvas 2D, jadi perkara yang anda lihat dalam pratonton ialah grid piksel tepat yang dihantar dalam PNG.
Pilih latar belakang — warna rata, kecerunan linear dua henti yang dibina daripada dua warna yang anda pilih atau foto yang dimuat naik yang dipangkas untuk mengisi bingkai penuh 1200×630 dengan cara yang sama seperti saiz latar belakang CSS: penutup, bukannya diregangkan di luar perkadaran. Taipkan tajuk dan sari kata pilihan: kedua-duanya diukur aksara demi aksara terhadap metrik fon kanvas itu sendiri, jadi tajuk yang terlalu panjang untuk dimuatkan pada satu baris dibalut pada baris kedua atau ketiga pada sempadan perkataan sebenar dan bukannya tertumpah ke tepi atau dipotong secara tidak kelihatan. Pilih penjajaran tengah atau kiri, pilih warna teks yang berbunyi pada latar belakang anda dan lepaskan logo pilihan ke sudut pada saiz tetap dan boleh dibaca.
Di bawah kanvas, empat kad kecil menganggarkan bagaimana imej yang telah siap kelihatan sebaik sahaja platform sebenar membungkusnya dengan kromnya sendiri: Kad Twitter/X hanya menunjukkan domain dan tajuk tebal di bawah imej tanpa garis keterangan, Facebook menambah jalur domain huruf besar di atas blok tajuk dan perihalan, LinkedIn meletakkan domain di bawah tajuk tanpa penerangan sama sekali, dan meletakkan tajuk gelap di atas domainnya, dan letakkan tajuk gelap di atas domainnya. tema. Ini adalah anggaran gaya untuk tujuan perancangan — dilabel dengan jelas sebagai ilustrasi, dengan baris domain yang anda taip sendiri — bukan pengambilan langsung atau tangkapan skrin platform sebenar, kerana berkongsi pautan dan membenarkan perangkak setiap platform sendiri membaca teg meta og:imej dan og:tajuk sebenar halaman anda ialah perkara yang sebenarnya menghasilkan kad langsung.
Semuanya dipaparkan secara setempat pada elemen kanvas HTML dalam penyemak imbas anda: tajuk, sari kata, latar belakang yang dimuat naik dan logo tidak pernah meninggalkan peranti anda, dan fail yang dieksport ialah canvas.toBlob() PNG yang bersih yang mengandungi hanya perkara yang anda karang — tiada sempadan mockup, bar penyemak imbas palsu atau logo platform dimasukkan ke dalam imej yang dimuat turun. Jika anda juga perlu mengubah saiz atau menukar PNG yang dieksport selepas itu, alat pengubahsuai imej dan alat penukar imej tapak ini muncul tepat di tempat yang ini berhenti.