HTML to Canvas: bitmap görüntü mü, düzenlenebilir katman mı?

“HTML to canvas”, kimin aradığına göre iki farklı anlama gelen ifadelerden biridir. Bir front-end geliştirici genellikle bir DOM öğesini HTML <canvas> içine işlemeyi kasteder; html2canvas gibi kütüphanelerin işi. Bir tasarımcı ise genellikle bir web sayfasını üzerinde çalışabilmek için Figma tuvaline almayı kasteder.

İkisi de HTML ile başlar. İkisi de canvas (tuval) denen bir şeyin üzerinde biter. Ama sonuçlar temelden farklıdır: biri düz bir piksel ızgarası, diğeri düzenlenebilir katmanlardan oluşan bir ağaçtır. Yanlış olanı seçmek zamana mal olur; bu yüzden net olmaya değer.

Anlam 1: HTML'den bir HTML <canvas>'a (bitmap'ler)

Nasıl çalışır

HTML <canvas> öğesi bir çizim yüzeyidir: JavaScript'in üzerine boyayabileceği dikdörtgen bir piksel alanı. html2canvas gibi kütüphaneler DOM'u dolaşır, hesaplanmış stilleri okur ve Canvas 2D API'sini kullanarak sayfayı bir canvas üzerine yeniden çizer. Çıktı, PNG veya JPEG olarak dışa aktarabileceğiniz bir bitmap'tir.

İlgili yaklaşımlar aynı türde sonuç üretir:

• Tarayıcı ekran görüntüleri: tarayıcının kendi ekran görüntüsü özelliği, DevTools'taki “Capture node screenshot” ya da headless tarayıcı ekran görüntüleri.
• SVG foreignObject hileleri: HTML'i bir SVG içine gömün, onu bir canvas'a çizin, pikselleri dışa aktarın.
• Sunucu tarafı ekran görüntüsü servisleri: headless bir tarayıcı sayfayı işler ve bir görsel döndürür.

Bitmap ne zaman doğru cevaptır

Bitmap'ler, teslim edilecek şey görselin kendisi olduğunda gerçekten kullanışlıdır:

• “Görsel olarak paylaş” butonları: bir grafik, bir fiş, bir alıntı kartı.
• Build'ler arasında pikselleri karşılaştıran görsel regresyon testleri.
• Küçük resimler ve sosyal medya önizleme görselleri.
• Kullanıcının tam olarak ne gördüğünü göstermesi gereken hata raporları.
• Bir sayfanın belirli bir andaki görünümünü arşivlemek.

Bunların hepsinde kimsenin sonucu düzenlemesi gerekmez. Ona bakmaları gerekir.

Bitmap'lerin sınırlamaları

Yakalanan sayfa üzerinde çalışmak istediğiniz anda pikseller engel olur:

• Düzenleme yok. Bir başlığı değiştiremez, bir boşluğu ayarlayamaz veya bir rengi değiştiremezsiniz. Yalnızca üzerine boyayabilirsiniz.
• Metin yok. Metin pikseldir. Onu seçemez, içinde arama yapamaz, font boyutunu kontrol edemez veya bir şartnameye kopyalayamazsınız.
• Ölçeklenince bulanıklaşır. Bir bitmap'in sabit bir çözünürlüğü vardır. Yakınlaştırın ya da 1x bir yakalamayı yüksek yoğunluklu bir ekrana koyun, kenarlar yumuşar.
• Yapı yok. İncelenecek frame, hiyerarşi veya boşluk değeri yoktur. Bir buton ve arkasındaki arka plan aynı katmandır.
• Responsive davranış yok. 1440'ta alınan bir ekran görüntüsü her zaman yalnızca 1440'tır. Her genişlik için ayrı bir yakalamaya ihtiyacınız olur ve hiçbiri anlamlı şekilde yeniden boyutlandırılamaz.
• Tasarım sistemi yok. Renkler ve tipografi değişkenlere veya stillere dönüştürülemez, tekrarlanan öğeler bileşen olamaz.
• Sadakat boşlukları (yeniden çizenlerde). DOM'u bir canvas'a yeniden çizen kütüphaneler CSS'i JavaScript ile yeniden uygular; bu yüzden daha yeni veya daha az yaygın CSS özellikleri gerçek tarayıcıdan farklı işlenebilir.

Anlam 2: HTML'i Figma tuvaline (düzenlenebilir katmanlar)

Nasıl çalışır

Figma'da “canvas”, yani tuval, frame'lerinizin bulunduğu sonsuz çalışma alanıdır. HTML'i Figma tuvaline koymak, işlenmiş sayfayı yerel Figma nesnelerine dönüştürmek demektir: frame'ler, metin katmanları, vektörler ve görsel dolguları.

HTML to Frames'in yaptığı budur. Bir sayfa gerçek bir tarayıcıda işlenir, geometrisi ve hesaplanmış stilleri ölçülür ve eklenti onu Figma'da şu şekilde yeniden kurar:

• sayfa yapısını yansıtan, doğrulanabildiği yerlerde Auto Layout'lu iç içe frame'ler,
• karışık stiller, harf aralığı, satır yüksekliği ve bağlantılarla gerçek metin katmanları,
• düzenlenebilir vektörler olarak SVG,
• object-fit ve background-size'a uyan görsel dolguları olarak görseller,
• yerel özellikler olarak kenarlıklar, köşe yarıçapları, gölgeler, gradyanlar, blur ve karışım modları.

Sonuç; düzenleyebileceğiniz, yeniden stillendirebileceğiniz, yeniden boyutlandırabileceğiniz ve bileşenlere ayırabileceğiniz bir şeydir: bir sayfanın resmi değil, çalışan bir tasarım dosyası. HTML to Figma rehberi içe aktarma akışının tamamını anlatıyor.

Düzenlenebilir katmanlar ne zaman doğru cevaptır

• Mevcut bir siteden başlayan yeniden tasarımlar.
• Boşluk, tipografi ve renk denetimleri.
• Tasarım sistemi çıkarma: renk değişkenleri, metin stilleri ve gölge stilleri (Pro).
• Chrome uzantısı ile localhost dahil, kodda yapılmış sayfaların teslimi ve incelenmesi.
• MCP üzerinden içe aktarılan yapay zekâ ile üretilmiş arayüzün iyileştirilmesi; bkz. AI to Figma.
• Responsive çalışma: tek içe aktarmadan Desktop, Tablet ve Mobile.

Yan yana

Kısacası: html2canvas size piksel verir; HTML to Frames size Figma tuvalinde katmanlar verir.

Gerçek bir tarayıcıda işlemenin önemi

Her iki yaklaşım da her şeyden önce sayfanın ne kadar sadık işlendiğine bağlıdır. html2canvas gibi yeniden çizen kütüphaneler sayfanın içinde çalışır ve CSS yerleşimini ve boyamayı JavaScript ile yeniden uygular. Bu yaygın stiller için iyi çalışır, ancak kütüphanenin uygulamadığı ya da biraz farklı uyguladığı her şey görselde bir uyumsuzluk olarak ortaya çıkar.

HTML to Frames farklı bir yol izler. Herkese açık sayfalar, yerel dosyalar ve yapıştırılan kod izole, sandbox içinde çalışan bir tarayıcıda işlenir; Chrome uzantısıyla yakalanan sayfalar ise kendi tarayıcınızdan gelir. Her iki durumda da eklenti, tarayıcının gerçekte ürettiği geometriyi ve hesaplanmış stilleri okur, ardından bunları Figma nesneleri olarak yeniden kurar. Yanlış yapılması kolay ayrıntıların doğru aktarılmasının nedeni budur:

• Chrome gibi çizilen liste işaretleri, CSS sayaçları, üst simge ve alt simge.
• Gradyanlar: px durakları ve tekrarlayan veya döşemeli gradyanlar dahil doğrusal, radyal ve konik.
• object-fit, background-size ve döşemeye uyularak srcset'ten yüksek çözünürlüklü görseller.
• Farklı renkte tek bir kenarlık, iç ve dış gölgeler ve text-shadow.

Sayfa ayrıca sıradan bir ziyaretçinin gördüğü gibi yakalanır: çerez bannerları ve açılır pencereler istek üzerine gizlenebilir, animasyonlar dondurulur; böylece kare geçişin ortasında yakalanmış değil, temiz olur.

Peki gerçekten canvas olan şeyler?

İki anlamın buluştuğu yer burası. Bir web sayfasının bazı kısımları doğası gereği pikseldir ve hiçbir dönüştürücü onları anlamlı vektör katmanlarına dönüştüremez:

• bir <canvas> içine çizilen WebGL ve 3D sahneler,
• bazı grafikler veya oyunlar gibi 2D canvas çizimleri,
• gömülü haritalar dahil iframe'ler,
• poster görseli olmayan videolar,
• object ve embed öğeleri.

HTML to Frames bunları pragmatik şekilde ele alır: her biri yalnızca o kutunun ekran görüntüsü olarak gelir. Görsel, aksi halde tamamen düzenlenebilir bir sayfanın içinde doğru yerde ve doğru boyutta durur. Hero başlığınız, navigasyonunuz ve kartlarınız gerçek katmanlar olarak kalır; yalnızca 3D ürün görüntüleyici veya gömülü harita bir bitmap'tir.

Animasyonlu içerik için yakalama temiz ve kararlı bir kare hedefler: animasyonlar dondurulur ve sahnenin yakalanmadan önce anlamlı bir şey işlemeye zamanı olsun diye WebGL birkaç kareden sonra dondurulur.

Bu karma yaklaşım genellikle bir tasarımcının istediği şeydir. Gömülü bir haritanın içini yeniden tasarlamazsınız; etrafındaki kartı tasarlarsınız. Gömülü içerik için bir ekran görüntüsü yer tutucu ve geri kalan her şeyin düzenlenebilir olması pratik sonuçtur.

Henüz dönüştürülmeyenler

Sınırlar konusunda eksiksiz olmak gerekirse: skew ve 3D CSS dönüşümleri, path() clip-path'leri, çok katmanlı maskeler ve Display-P3 renkleri henüz desteklenmiyor. CSS döndürme ve ölçekleme, tekil clip-path şekilleri, mask-image, blur ve backdrop-blur ise destekleniyor. Tam liste özellikler sayfasında.

Doğru yaklaşımı seçmek

Tek bir soru sorun: sonucu düzenleyecek biri olacak mı?

1. Hayır, görüntülemek, paylaşmak veya test etmek için. Bir bitmap kullanın. html2canvas veya bir tarayıcı ekran görüntüsü daha basit ve daha hızlıdır.
2. Evet, tasarım işi için. Figma tuvalinde düzenlenebilir katmanlar kullanın.
3. Çoğunlukla evet, ama bazı kısımlar harita, video veya 3D. Düzenlenebilir katmanlar kullanın; o kutular otomatik olarak görsel olarak gelir.

Birkaç pratik senaryo:

• “Bir slayt için bu grafiğin PNG'sine ihtiyacım var.” Bitmap.
• “Fiyatlandırma sayfamızı yeniden tasarlamam gerekiyor.” Düzenlenebilir katmanlar: içe aktarın, sonra iterasyon yapın.
• “Canlı ürünü mockup'ımızla karşılaştırmak istiyorum.” İsteğe bağlı Reference screenshot (Pro) ile düzenlenebilir katmanlar: piksel karşılaştırması için açabileceğiniz gizli, kilitli bir görsel katmanı. Bu, iki anlamın birlikte çalışmasına güzel bir örnek: kontrol için bir bitmap, çalışmak için katmanlar.
• “Giriş yapılmış paneli Figma'da istiyorum.” Tarayıcınızın görebildiği sayfaları o anki durumlarıyla birlikte yakalayan Chrome uzantısıyla düzenlenebilir katmanlar.

“Ekran görüntüsünü al geç” neden sonradan daha pahalıya gelir

Ekran görüntüleri yakalama saniyeler sürdüğü için daha hızlı hissettirir. Maliyet sonradan ortaya çıkar: asıl tasarım işi başladığında birinin her frame'i elle yeniden kurması gerekir. Pikselden padding ölçmek, font boyutlarını tahmin etmek, metinleri yeniden yazmak, renkleri yeniden oluşturmak; sayfa başına saatleri bulur.

Düzenlenebilir katmanlara dönüştürmek bu işi araca devreder. Ölçülmüş boyutlar, gerçek metin ve Pro ile sayfanın kendisinden üretilen değişkenler, metin stilleri ve bileşenler alırsınız. HTML to design iş akışı, bunun tam bir yeniden tasarım boyunca nasıl göründüğünü gösteriyor.

Gizlilik notu

Hangi yaklaşımı seçerseniz seçin, sayfanın nerede işlendiğini düşünün. html2canvas, kullanıcının tarayıcısında sayfanın içinde çalışır. HTML to Frames herkese açık sayfaları izole, sandbox içinde çalışan bir tarayıcıda işler, sonucu bir kez teslim eder ve diske yazmadan bellekten siler; Chrome uzantısı ise kendi tarayıcınızda çalışır ve Send to Figma'yı kullanmadıkça hiçbir şey göndermez. Ayrıntılar güvenlik sayfasında.

Özet

• HTML to canvas (bitmap) bir sayfayı piksellere dönüştürür. Paylaşım, test ve önizlemeler için harika; düzenlenemez.
• HTML'i Figma tuvaline almak, bir sayfayı üzerinde çalışabileceğiniz frame'lere, metinlere ve vektörlere dönüştürür.
• Gerçekten canvas olan içerik (WebGL, haritalar, iframe'ler, poster görseli olmayan video) o kutunun görseli olarak yakalanır, geri kalanı düzenlenebilir kalır.

Katman tabanlı yaklaşımı kendi sayfanızda görmek için eklentiyi edinin ve dokümantasyonla başlayın ya da Auto Layout motorunun sayfa yapısını nasıl frame'lere dönüştürdüğünü okuyun.