Bir HTML öğesinin anlık görüntüsünü almak, tasarım sürecinize yardımcı olabilir ve bazen son uygulamanızın bir parçası olabilir. Tek bir kütüphane ile bu kolay bir iştir.
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?
html-to-image kitaplığı, base64 veri URL’si biçiminde bir resim ü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:
- Hedef HTML öğesinin, alt öğelerinin ve ekli tüm sözde öğelerin bir klonunu oluşturun.
- Tüm klonlanmış öğeler için stili kopyalayın ve stili satır içine gömün.
- Varsa ilgili web yazı tiplerini gömün.
- Mevcut görüntüleri gömün.
- Klonlanmış düğümü XML’e ve ardından SVG’ye dönüştürün.
- Bir Veri URL’si oluşturmak için SVG’yi kullanın.
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. MDN’nin açıkladığı gibi, tuval öğenize CORS tarafından onaylanmayan verilerin dahil edilmesi onu bozacaktır .
- 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, npm paket yöneticisini kullanarak html-to-image’i bu dizine kurun . İşte yüklemek için terminal komutu:
npm install –save html-to-image
Kitaplığı kullanmayı biraz daha kolaylaştırmak için bir JavaScript paketleyici de kurmalısınız. esbuild paketleyici, düğüm modüllerinin web uyumlu komut dosyalarına paketlenmesine yardımcı olabilir .
npm install esbuild
Yüklemeniz gereken tek şey bu. Ardından, dizininizde index.html adlı bir dosya oluşturun ve onu seçtiğiniz bir web sunucusuyla sunun. Aşağıdaki kodu index.html içine koyun:
<!doctype html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport”
content=”width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0″>
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
<title>Document</title>
<style>
.colorful-div {
padding: 3rem;
color: white;
background-image: linear-gradient(to right, yellow, rebeccapurple);
border: 1px solid black;
margin: 1rem auto;
font-size: 3rem;
font-family: cursive;
}
</style>
</head>
<body>
<div class=”colorful-div”>
I’m going to be in a screenshot!
</div>
<div class=”long-text”>
I’m an example of a sufficiently verbose paragraph that
illustrates that taking screenshots in JavaScript is
really very easy, for the following reasons:
<ul>
<li>Reason 1</li>
<li>Reason 2</li>
<li>Reason 2</li>
</ul>
</div>
<script src=”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:
import * as htmlToImage from “html-to-image”;
const elems = [‘.colorful-div’, ‘.long-text’]
elems.forEach((elem, ind) => {
const node = document.querySelector(elem)
htmlToImage.toPng(node)
.then(function (dataUrl) {
let img = new Image();
img.src = dataUrl;
document.body.appendChild(img);
})
.catch(function (error) {
console.error(‘oops, something went wrong!’);
console.log(error)
});
})
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, terminalinizde aşağıdakileri çalıştırarak index.html’nin başvurduğu paketlenmiş dosyayı (out.js) oluşturmak için esbuild’i kullanın:
./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, geliştirme araçlarınızı açıp inceleyerek onaylayabilirsiniz.
- Bu kitaplık ayrıca JavaScript çerçeveleriyle de çalışır. Html’den görüntüye belgeleri , 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.