Build a Canvas Editor to Export Text as PNG Image & PDF Using Fabric.js & PDF-LIB in Browser

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <title>Canvas Text to Image</title>
</head>
<body>
    <div class="flex justify-center items-center h-screen">
        <div id="canvas-container" class="w-1/2">
            <canvas id="canvas" class="border border-gray-300"></canvas>
            <div class="mt-4">
                <button id="draw-btn" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Draw</button>
                <button id="text-btn" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Text</button>
                <button id="export-png-btn" class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">Export as PNG</button>
                <button id="export-pdf-btn" class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">Export as PDF</button>
            </div>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.5.0/fabric.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf-lib/1.17.1/pdf-lib.min.js"></script>
    <script>
        const canvas = new fabric.Canvas('canvas', {
            width: 500,
            height: 500,
            backgroundColor: 'white'
        });

        const drawBtn = document.getElementById('draw-btn');
        const textBtn = document.getElementById('text-btn');
        const exportPngBtn = document.getElementById('export-png-btn');
        const exportPdfBtn = document.getElementById('export-pdf-btn');

        drawBtn.addEventListener('click', () => {
            canvas.isDrawingMode = true;
            canvas.freeDrawingBrush.width = 5;
            canvas.freeDrawingBrush.color = 'black';
        });

        textBtn.addEventListener('click', () => {
            const text = new fabric.IText('Type your text here', {
                left: 100,
                top: 100,
                fontSize: 20,
                fill: 'black'
            });
            canvas.add(text);
        });

        exportPngBtn.addEventListener('click', () => {
            const dataURL = canvas.toDataURL({ format: 'png' });
            const link = document.createElement('a');
            link.href = dataURL;
            link.download = 'canvas_image.png';
            link.click();
        });

        exportPdfBtn.addEventListener('click', async () => {
            const pdfDoc = await PDFLib.PDFDocument.create();
            const page = pdfDoc.addPage([canvas.width, canvas.height]);
            const canvasImg = await pdfDoc.embedPng(canvas.toDataURL({ format: 'png' }));
            const { width, height } = canvasImg.scale(0.5);
            page.drawImage(canvasImg, {
                x: 0,
                y: 0,
                width,
                height,
            });
            const pdfBytes = await pdfDoc.save();
            const blob = new Blob([pdfBytes], { type: 'application/pdf' });
            const link = document.createElement('a');
            link.href = URL.createObjectURL(blob);
            link.download = 'canvas_image.pdf';
            link.click();
        });
    </script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Canvas Text to Image</title>

</head>

<body>

<button id="export-png-btn" class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">Export as PNG</button>

<button id="export-pdf-btn" class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">Export as PDF</button>

</div>

const canvas = new fabric.Canvas('canvas', {

width: 500,

height: 500,

backgroundColor: 'white'

});

const drawBtn = document.getElementById('draw-btn');

const textBtn = document.getElementById('text-btn');

const exportPngBtn = document.getElementById('export-png-btn');

const exportPdfBtn = document.getElementById('export-pdf-btn');

drawBtn.addEventListener('click', () => {

canvas.isDrawingMode = true;

canvas.freeDrawingBrush.width = 5;

canvas.freeDrawingBrush.color = 'black';

});

textBtn.addEventListener('click', () => {

const text = new fabric.IText('Type your text here', {

left: 100,

top: 100,

fontSize: 20,

fill: 'black'

});

canvas.add(text);

});

exportPngBtn.addEventListener('click', () => {

const dataURL = canvas.toDataURL({ format: 'png' });

const link = document.createElement('a');

link.href = dataURL;

link.download = 'canvas_image.png';

link.click();

});

exportPdfBtn.addEventListener('click', async () => {

const pdfDoc = await PDFLib.PDFDocument.create();

const page = pdfDoc.addPage([canvas.width, canvas.height]);

const canvasImg = await pdfDoc.embedPng(canvas.toDataURL({ format: 'png' }));

const { width, height } = canvasImg.scale(0.5);

page.drawImage(canvasImg, {

x: 0,

y: 0,

width,

height,

});

const pdfBytes = await pdfDoc.save();

const blob = new Blob([pdfBytes], { type: 'application/pdf' });

const link = document.createElement('a');

link.href = URL.createObjectURL(blob);

link.download = 'canvas_image.pdf';

link.click();

});

</script>

</body>

</html>

Build a Canvas Editor to Export Text as PNG Image & PDF Using Fabric.js & PDF-LIB in Browser

Comments

Leave a Reply Cancel reply

Archives