JavaScript kullanarak web sayfanızın bir kısmının veya tamamının ekran görüntüsünü almak istiyorsanız, kendinizi sıkışmış bulabilirsiniz. JavaScript'te bunu yapmanın doğrudan bir yolu olmadığı için bir HTML öğesinden görüntü oluşturmak zor görünebilir.

Neyse ki, bu imkansız bir iş değil ve aslında uygun araçlarla oldukça kolay. Html-to-image kitaplığını kullanarak, DOM düğümlerinin görüntülerini oluşturmak, tek bir işlev çağrısı kadar basittir.

Html'den görüntüye nasıl çalışır?

bu html'den görüntüye kitaplık, base64 veri URL'si biçiminde bir görüntü üretir. PNG, JPG ve SVG dahil olmak üzere çeşitli çıktı formatlarını destekler. Bu dönüşümü gerçekleştirmek için kitaplık şu algoritmayı kullanır:

  1. Hedef HTML öğesinin, alt öğelerinin ve ekli tüm sözde öğelerin bir klonunu oluşturun.
  2. Tüm klonlanmış öğeler için stili kopyalayın ve stili satır içine gömün.
  3. Varsa ilgili web yazı tiplerini gömün.
  4. Mevcut görüntüleri gömün.
  5. Klonlanmış düğümü XML'e ve ardından SVG'ye dönüştürün.
  6. Bir Veri URL'si oluşturmak için SVG'yi kullanın.
instagram viewer

Uyarılar ve Sınırlamalar

Html-to-image harika bir kitaplık olsa da mükemmel değil. Birkaç uyarısı var, yani:

  • Kitaplık, Internet Explorer veya Safari'de çalışmayacaktır.
  • Dönüştürmeye çalıştığınız HTML kusurlu bir tuval öğesi içeriyorsa, kitaplık başarısız olur. Olarak MDN tuval öğenize CORS tarafından onaylanmayan verilerin dahil edilmesi, onu bozacağını açıklar.
  • Tarayıcılar bir veri URL'sinin maksimum boyutuna sınırlama getirdiğinden, kitaplığın dönüştürebileceği HTML boyutuna ilişkin sınırlamalar vardır.

Kitaplığı Kullanma

Kütüphaneyi denemek için yapmanız gereken ilk şey yerel makinenizde bir proje dizini oluşturmaktır. Ardından, kullanarak bu dizine html-to-image yükleyin npm paket yöneticisi. İşte yüklemek için terminal komutu:

npm Yüklemek--html'den görüntüye kaydet

Kitaplığı kullanmayı biraz daha kolaylaştırmak için bir JavaScript paketleyici de kurmalısınız. bu esbuild paketleyici, düğüm modüllerinin web uyumlu komut dosyalarına paketlenmesine yardımcı olabilir.

npm Yüklemek esbuild

Yüklemeniz gereken tek şey bu. Ardından, adlı bir dosya oluşturun index.html dizininizde ve seçtiğiniz bir web sunucusuyla sunun. Aşağıdaki kodu index.html içine koyun:

<!doctype html>
<html dili="tr">
<kafa>
<meta karakter kümesi="UTF-8">
<meta adı="görüş alanı"
 içerik="genişlik=cihaz genişliği, kullanıcı tarafından ölçeklenebilir=hayır, ilk ölçek=1,0, maksimum ölçek=1,0, minimum ölçek=1,0">
<meta http-eşdeğeri="X-UA-Uyumlu" içerik="yani=kenar">
<Başlık>Belge</title>
<stil>
 .colorful-div {
 dolgu: 3rem;
 Beyaz renk;
 arka plan görüntüsü: doğrusal gradyan (sağa, sarı, rebeccapurple);
 kenarlık: 1 piksel düz siyah;
 kenar boşluğu: 1rem otomatik;
 yazı tipi boyutu: 3rem;
 yazı tipi ailesi: el yazısı;
 }
</style>
</head>
<gövde>
<div sınıfı="renkli-div">
 ben'Bir ekran görüntüsünde olacağım!
</div>
<div sınıfı="uzun metin">
 ben'm yeterince ayrıntılı bir paragraf örneği
 JavaScript'te ekran görüntüsü almanın
 aşağıdaki nedenlerden dolayı gerçekten çok kolay:
<ul>
<li>neden 1</li>
<li>Sebep 2</li>
<li>Sebep 2</li>
</ul>
</div>
<komut dosyası kaynağı="out.js"></script>
</body>
</html>

Bu kod, sayfada iki öğe oluşturur: degrade arka planı olan bir div ve başka bir div içinde bir miktar metin ve sırasız bir liste. Ardından, bu öğeleri görüntülere dönüştürmek için JavaScript'i yazacaksınız. Aşağıdaki kodu script.js adlı yeni bir dosyaya koyun:

içe aktarmak * olarak htmlToImage itibaren "html'den görüntüye";
const öğeleri = ['.renkli-div', '.uzun metin']


elementler.her biri için((elem, ind) => {
const düğüm = belge.querySelector (öğe)
htmlToImage.toPng(düğüm)
 .sonra(işlev (veri URL'si) {
İzin Vermek resim = yeni Resim();
 img.src = dataUrl;
belge.gövde.appendÇocuk(resim);
 })
 .tutmak(işlev(hata){
 konsol.hata('Hoop! Birşeyler yanlış gitti!');
konsol.log (hata)
 });
})

Bu kod birkaç şey yapar:

  • Html'den görüntüye kitaplığını içe aktarır.
  • İki öğeyi hedefleyen CSS seçicilerinden oluşan bir dizi oluşturur.
  • Dizinin her bir öğesinden veri URL'si biçiminde bir PNG görüntüsü oluşturur.
  • Bir img etiketi oluşturur ve src niteliğini veri URL'sine ayarlayarak iki öğenin görüntü kopyalarını oluşturur.

Şimdi paketlenmiş dosyayı oluşturmak için esbuild kullanın (out.js) bu index.html, terminalinizde aşağıdakileri çalıştırarak başvurur:

 ./node_modules/.bin/esbuild script.js --bundle --outfile=out.js

Bu noktada, index.html'nin tarayıcınızda nasıl görünmesi gerektiği aşağıda açıklanmıştır:

Kopyalar, orijinalleri ile tamamen aynı görünse de, aslında görüntü öğeleridir. Bunu şu şekilde onaylayabilirsiniz: geliştirme araçlarınızı açma ve onları incelemek.

Bu kitaplık ayrıca JavaScript çerçeveleriyle de çalışır. bu html'den görüntüye belgeler diğer görüntü biçimlerinin nasıl oluşturulacağına ilişkin yönergeler içerir. Ayrıca kitaplığın React ile nasıl kullanılacağını gösteren bir örnek içerir.

JavaScript ile Ekran Görüntüsü Almak Kolaydır

HTML öğelerinden görüntüler oluşturmak veya DOM'nin ekran görüntülerini almak için yerel bir JavaScript yöntemi yoktur. Ancak, html-to-image gibi kütüphaneler ve servislerin yardımıyla kolay bir iş haline gelir.

Benzer sonuçları elde etmenin wkhtmltoimage kitaplığı gibi başka yolları da vardır. Tam bir web sayfasının ekran görüntülerini almak için bu açık kaynaklı aracı kullanabilirsiniz.