JavaScript’te HTML’yi bir görüntüye dönüştürmek için, HTML içeriğini bir <canvas> öğesi içine yerleştirerek ve canvas üzerinde görüntü olarak kaydederek yapabilirsiniz.
İşlemi aşağıdaki adımları izleyerek gerçekleştirebilirsiniz:
HTML içeriğini içeren bir öğe seçin. Bu öğe, görüntü olarak dönüştürmek istediğiniz herhangi bir HTML öğesi olabilir, örneğin <div>, <article> veya <section>. Örneğin, aşağıdaki kod, HTML içeriğini içeren bir <div> öğesini seçer:
javascript
const htmlContent = document.querySelector(‘#html-content’);
Seçilen öğeyi bir canvas öğesi içine yerleştirin. Bu işlem için, seçilen HTML öğesinin içeriğini alın ve bir canvas öğesine yazdırın. Aşağıdaki kod bu işlemi gerçekleştirir:
javascript
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
const { width, height } = htmlContent.getBoundingClientRect();
canvas.width = width;
canvas.height = height;
context.drawSvg(await getSvgDataUrl(htmlContent), 0, 0);
Bu kod, document.createElement() yöntemini kullanarak yeni bir <canvas> öğesi oluşturur. Daha sonra, getContext() yöntemini kullanarak canvas öğesinin içeriğine erişir ve canvas boyutunu ayarlar. En son olarak, drawSvg() yöntemini kullanarak HTML içeriğini canvas üzerine çizer.
Canvas görüntüsünü kaydedin. Bu işlem için, canvas öğesini bir görüntü dosyasına dönüştürmeniz gerekiyor. Aşağıdaki kod, canvas öğesini görüntü dosyasına dönüştürmek için toDataURL() yöntemini kullanır:
javascript
const image = new Image();
image.src = canvas.toDataURL();
document.body.appendChild(image);
Bu kod, new Image() ile yeni bir <img> öğesi oluşturur ve canvas.toDataURL() yöntemini kullanarak canvas görüntüsünü veri URL’si olarak alır. Son olarak, <img> öğesinin src özelliğine veri URL’sini atar ve sayfaya ekler.
getSvgDataUrl işlevi, bir HTML öğesinin içeriğini SVG verilerine dönüştürür ve bir URL olarak döndürür. Bu işlev, svg.js gibi bir kütüphane kullanılarak gerçekleştirilebilir. Örneğin, aşağıdaki kod, svg.js kütüphanesini kullanarak HTML içeriğini SVG verilerine dönüştürür:
javascript
import SVG from 'svg.js';
async function getSvgDataUrl(htmlElement) {
const svg = SVG()
.size('100%', '100%')
.foreignObject()
.add(htmlElement);
return new Promise((resolve) => {
svg.svg((data)
getSvgDataUrl işlevi, SVG verilerini bir URL olarak döndürür. SVG verileri, SVG.js kütüphanesinin svg() yöntemi kullanılarak oluşturulan bir SVG nesnesi tarafından sağlanır. foreignObject() yöntemi, SVG nesnesi içine bir HTML öğesi eklemek için kullanılır. Bu örnekte, HTML öğesi htmlElement parametresi olarak geçirilir.
svg() yöntemi, SVG verilerini oluşturmak için kullanılır. Bu yöntem, SVG.js kütüphanesi tarafından sağlanır ve SVG nesnesinin tüm özelliklerini içeren bir SVG dosyası döndürür. svg.js kütüphanesi, SVG nesnesinin özelliklerini kullanarak SVG dosyasını oluşturur ve bu dosyayı bir veri URL’si olarak döndürür.
Sonuç olarak, getSvgDataUrl işlevi, bir HTML öğesini SVG verilerine dönüştürür ve bu verileri bir URL olarak döndürür. Bu URL, canvas üzerinde görüntü olarak çizilebilir veya <img> öğesinin src özelliğine atanarak görüntülenebilir.