Softonic

HTML'den görsele dönüştürücü

Adım 1 / 3

Bir HTML parçacığı yapıştırın. Komut dosyaları, formlar, çerçeveler ve olay işleyicileri görselleştirmeden önce kaldırılır.

Bir HTML ve CSS parçacığını, kaynak kodu veya oluşturulan görseli sunucularımıza yüklemeden sabit boyutlu PNG ya da JPG’ye dönüştürün. Her kenar için 64 ile 1.920 px, ölçek için 1x ile 3x arasında seçim yapın; sonucu tarayıcıda önizleyip indirin.

HTML görsel olarak nasıl oluşturulur?

  1. 1

    Kodu yapıştırın

    Bir HTML parçacığı veya belgesi girin. Satır içi CSS ve `<style>` kuralları desteklenir; komut dosyaları, formlar, çerçeveler ve olay işleyicileri kaldırılır.

  2. 2

    Tuvali ayarlayın

    PNG veya JPG seçin, genişlik ile yüksekliği girin ve 1x ile 3x arasında bir ölçek belirleyin.

  3. 3

    Önizlemeyi oluşturun

    Tarayıcı temizlenmiş kodu sabit boyutlu, yalıtılmış bir çerçevede düzenler.

  4. 4

    Yerel olarak indirin

    PNG veya JPG dosyasını doğrudan kaydedin. Oluşturulan dosya sunucularımıza yüklenmez.

Tarayıcı oluşturucusunun destekledikleri

Dönüştürücü tarayıcının yerleşim motorunu kullanır. Normal HTML, satır içi CSS, <style> kuralları, Flexbox, Grid, geçişler, gölgeler, gömülü SVG ve yüklü yazı tipleri sonuçta görünebilir. Etkileşimli bir sayfa kopyası değil, sabit bir raster görsel oluşturur.

Tuval ve çıktı kuralları

Ayar Desteklenen aralık Davranış
Genişlik 64 ile 1.920 px Yakalama çerçevesinin tam CSS genişliği
Yükseklik 64 ile 1.920 px Tam CSS yüksekliği; taşan içerik kesilir
Ölçek 1x ile 3x Yerleşimi değiştirmeden çözünürlüğü artırır
PNG Sabit boyutlu raster Saydam alanları korur
JPG Sabit boyutlu raster %92 kalite ve beyaz arka plan kullanır

Tarayıcı belleğini korumak için çıktı 16 megapikselle sınırlandırılır. Boyutlar ve ölçek bu sınırı aşarsa araç ölçeği en yüksek güvenli 0,5x adımına düşürür. HTML kaynağı en fazla 100.000 karakter olabilir.

Gizlilik ve uzak kaynaklar

HTML ve oluşturulan veri görseli geçerli tarayıcıda kalır. Adımlı modda bu sekmenin oturum depolaması ayarları bir sonraki adıma kadar saklar; baştan başlatmak bunları temizler. Araç kodu veya görseli sunucularımıza göndermez.

Harici bir URL istisnadır. Uzak görseller, web yazı tipleri ve stil sayfaları kaynak sunucularından istenir, bu sunucular isteği görebilir. CORS veya erişim denetimleri yüklemeyi de engelleyebilir. Tamamen çevrimdışı işlem için görselleri ve yazı tiplerini veri URL’si olarak gömün, CSS’yi satır içinde tutun.

Güvenlik ve görünüm sınırları

Yakalamadan önce komut dosyaları, formlar, iç içe çerçeveler, gömülü nesneler ve olay öznitelikleri kaldırılır. Önizleme etkileşimsiz olur, ancak bu işlem başka yerde yayımlanacak içerik için genel amaçlı bir HTML temizleyicinin yerini tutmaz. JavaScript bileşenleri çalışmaz, video ve canvas durumu garanti edilmez, animasyonlar tek kareye dönüşür ve tarayıcıya özgü CSS başka bir motorda farklı görünebilir.

Sık Sorulan Sorular

Evet. Oluşturucu head bölümündeki desteklenen <style> kurallarını ve stil sayfası bağlantılarını alır, body içeriğini yakalar. Komut dosyaları, meta veriler, formlar, çerçeveler ve etkin işleyiciler kaldırıldığı için sonuç gezilebilir bir sayfa değildir.

Kaynak sunucu alanlar arası kullanımı engelleyebilir, kimlik doğrulama isteyebilir veya geç yanıt verebilir. CORS izni olan erişilebilir bir URL kullanın ya da kaynağı veri URL’si olarak gömün.

PNG saydam pikselleri korur. JPG beyaz arka plan ve sabit %92 kalite kullanır; fotoğraflarda genellikle daha küçüktür. Araç WebP dışa aktarmaz ve ayrı kalite ayarı sunmaz.

Dönüştürücü çıktıyı 16 megapikselle sınırlar. Büyük tuvalde tarayıcı belleğinin tükenmesini önlemek için en yüksek güvenli 0,5x adımını otomatik olarak seçer.

İlgili Araçlar

FPS Sayacı

requestAnimationFrame ile tarayıcı FPS değerini ölçün: yumuşatma, en düşük ve en yüksek kare hızı, uyarı eşiği ve isteğe bağlı grafik. Yerel çalışır, yükleme ve API yoktur.

Kurgusal telefon numarası oluşturucu

Beş ülkede resmen ayrılmış aralıklardan 50 adede kadar kurgusal numara üretin.

Webpack Yapılandırma Oluşturucu

Saf JavaScript, React veya Vue için webpack 5 uyumlu bir webpack.config.js oluşturun: TypeScript, Babel, CSS veya Sass, görseller, HtmlWebpackPlugin, geliştirme sunucusu ve npm install satırı.

Tamamlayıcı Renk Bulucusu

Her girdi için tamamlayıcı renk belirleyin. HSL açısından tersi renk, bölünmüş tamamlayıcı çifti ve erişilebilir kombinasyonlar için öneriler geri verir.

Dosya Boyutu Dönüştürücü

Bayt, KB, MB, GB, TB ve ikili IEC birimleri (KiB, MiB, GiB, TiB) arasında, ondalık ve ikiliyi dilediğiniz gibi birleştirerek dönüşüm yapın.

Telefon numarası doğrulayıcı

Telefon numarasının ülkeye göre yapısını denetleyin; bölge, tür, E.164, uluslararası, ulusal ve RFC 3966 biçimlerini görün.

Araç diğer dillerde mevcuttur