Build a Canvas API Example to Merge Multiple Images in Horizontal & Vertical Direction Using JS

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Merger</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <style>
        .preview-image {
            max-width: 100%;
            max-height: 300px;
            margin-bottom: 20px;
        }
    </style>
</head>
<body class="bg-gray-100 p-4">
    <div class="max-w-md mx-auto bg-white p-6 rounded-md shadow-md">
        <h1 class="text-2xl font-bold mb-4">Image Merger</h1>
        <form id="image-merger-form" class="mb-4">
            <div class="mb-4">
                <label class="block text-gray-700 text-sm font-bold mb-2" for="image-files">Select Images:</label>
                <input type="file" id="image-files" name="image-files" accept="image/*" multiple required>
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 text-sm font-bold mb-2">Merge Direction:</label>
                <label class="inline-flex items-center mr-4">
                    <input type="radio" class="form-radio" name="merge-direction" value="horizontal" checked>
                    <span class="ml-2">Horizontal</span>
                </label>
                <label class="inline-flex items-center">
                    <input type="radio" class="form-radio" name="merge-direction" value="vertical">
                    <span class="ml-2">Vertical</span>
                </label>
            </div>
            <button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
                Merge Images
            </button>
        </form>
        <div id="image-preview" class="hidden">
            <h2 class="text-lg font-bold mb-2">Merged Image Preview:</h2>
            <img id="preview-image" class="preview-image" src="" alt="Merged Image">
            <a id="download-button" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-4 hidden" download="merged-image.png">
                Download Merged Image
            </a>
        </div>
    </div>

    <script>
        document.getElementById('image-merger-form').addEventListener('submit', function(event) {
            event.preventDefault();
            const mergeDirection = document.querySelector('input[name="merge-direction"]:checked').value;
            const imageFiles = document.getElementById('image-files').files;
            if (imageFiles.length < 2) {
                alert('Please select at least 2 images.');
                return;
            }

            loadImages(Array.from(imageFiles)).then(images => {
                const mergedImage = mergeImages(images, mergeDirection);
                displayMergedImage(mergedImage);
            });
        });

        function loadImages(files) {
            const promises = files.map(file => {
                return new Promise((resolve, reject) => {
                    const reader = new FileReader();
                    reader.onload = function(event) {
                        const img = new Image();
                        img.src = event.target.result;
                        img.onload = () => resolve(img);
                        img.onerror = reject;
                    };
                    reader.readAsDataURL(file);
                });
            });
            return Promise.all(promises);
        }

        function mergeImages(images, mergeDirection) {
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');

            if (mergeDirection === 'horizontal') {
                const totalWidth = images.reduce((sum, img) => sum + img.width, 0);
                const maxHeight = Math.max(...images.map(img => img.height));
                canvas.width = totalWidth;
                canvas.height = maxHeight;

                let xOffset = 0;
                images.forEach(img => {
                    ctx.drawImage(img, xOffset, 0);
                    xOffset += img.width;
                });
            } else if (mergeDirection === 'vertical') {
                const totalHeight = images.reduce((sum, img) => sum + img.height, 0);
                const maxWidth = Math.max(...images.map(img => img.width));
                canvas.width = maxWidth;
                canvas.height = totalHeight;

                let yOffset = 0;
                images.forEach(img => {
                    ctx.drawImage(img, 0, yOffset);
                    yOffset += img.height;
                });
            }

            return canvas.toDataURL('image/png');
        }

        function displayMergedImage(mergedImage) {
            const previewImage = document.getElementById('preview-image');
            const downloadButton = document.getElementById('download-button');
            previewImage.src = mergedImage;
            previewImage.onload = function() {
                document.getElementById('image-preview').classList.remove('hidden');
                downloadButton.href = mergedImage;
                downloadButton.classList.remove('hidden');
            };
        }
    </script>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

<!DOCTYPE html>

<head>

<title>Image Merger</title>

<style>

.preview-image {

max-width: 100%;

max-height: 300px;

margin-bottom: 20px;

}

</style>

</head>

<h1 class="text-2xl font-bold mb-4">Image Merger</h1>

<label class="block text-gray-700 text-sm font-bold mb-2" for="image-files">Select Images:</label>

</div>

<label class="block text-gray-700 text-sm font-bold mb-2">Merge Direction:</label>

<span class="ml-2">Horizontal</span>

</label>

<span class="ml-2">Vertical</span>

</label>

</div>

Merge Images

</button>

</form>

<h2 class="text-lg font-bold mb-2">Merged Image Preview:</h2>

Download Merged Image

</a>

</div>

document.getElementById('image-merger-form').addEventListener('submit', function(event) {

event.preventDefault();

const mergeDirection = document.querySelector('input[name="merge-direction"]:checked').value;

const imageFiles = document.getElementById('image-files').files;

if (imageFiles.length < 2) {

alert('Please select at least 2 images.');

return;

}

loadImages(Array.from(imageFiles)).then(images => {

const mergedImage = mergeImages(images, mergeDirection);

displayMergedImage(mergedImage);

});

function loadImages(files) {

const promises = files.map(file => {

return new Promise((resolve, reject) => {

const reader = new FileReader();

reader.onload = function(event) {

const img = new Image();

img.src = event.target.result;

img.onload = () => resolve(img);

img.onerror = reject;

};

reader.readAsDataURL(file);

});

return Promise.all(promises);

}

function mergeImages(images, mergeDirection) {

const canvas = document.createElement('canvas');

const ctx = canvas.getContext('2d');

if (mergeDirection === 'horizontal') {

const totalWidth = images.reduce((sum, img) => sum + img.width, 0);

const maxHeight = Math.max(...images.map(img => img.height));

canvas.width = totalWidth;

canvas.height = maxHeight;

let xOffset = 0;

images.forEach(img => {

ctx.drawImage(img, xOffset, 0);

xOffset += img.width;

});

} else if (mergeDirection === 'vertical') {

const totalHeight = images.reduce((sum, img) => sum + img.height, 0);

const maxWidth = Math.max(...images.map(img => img.width));

canvas.width = maxWidth;

canvas.height = totalHeight;

let yOffset = 0;

images.forEach(img => {

ctx.drawImage(img, 0, yOffset);

yOffset += img.height;

});

}

return canvas.toDataURL('image/png');

}

function displayMergedImage(mergedImage) {

const previewImage = document.getElementById('preview-image');

const downloadButton = document.getElementById('download-button');

previewImage.src = mergedImage;

previewImage.onload = function() {

document.getElementById('image-preview').classList.remove('hidden');

downloadButton.href = mergedImage;

downloadButton.classList.remove('hidden');

};

}

</script>

</body>

</html>

Build a Canvas API Example to Merge Multiple Images in Horizontal & Vertical Direction Using JS

Comments

Leave a Reply Cancel reply

Archives