Spaces:
Running
Running
| <html> | |
| <head> | |
| <title>Image Combiner</title> | |
| </head> | |
| <body> | |
| <h1>Image Combiner</h1> | |
| <div> | |
| <img src="https://drive.google.com/uc?id=1qxfPHJXyTeS60Jqou6TG6g13AWLPweZZ" id="image1"> | |
| <img src="https://drive.google.com/uc?id=11WKe16T11m70GVmXj5O3u-Tk85MQHPf8" id="image2"> | |
| <button onclick="combineImages()">Combine Images</button> | |
| </div> | |
| <div id="output"> | |
| <!-- The combined image will be shown here --> | |
| </div> | |
| <script> | |
| function combineImages() { | |
| // Get references to the two images | |
| var image1 = document.getElementById('image1'); | |
| var image2 = document.getElementById('image2'); | |
| // Create a canvas element | |
| var canvas = document.createElement('canvas'); | |
| canvas.width = image1.width + image2.width; | |
| canvas.height = Math.max(image1.height, image2.height); | |
| // Get the 2D context of the canvas | |
| var ctx = canvas.getContext('2d'); | |
| // Draw the first image on the left side of the canvas | |
| ctx.drawImage(image1, 0, 0, image1.width, image1.height); | |
| // Draw the second image on the right side of the canvas | |
| ctx.drawImage(image2, image1.width, 0, image2.width, image2.height); | |
| // Create a new combined image URL | |
| var combinedImageURL = canvas.toDataURL(); | |
| // Create a new image element to display the combined image | |
| var combinedImage = new Image(); | |
| combinedImage.src = combinedImageURL; | |
| // Add the combined image to the output div | |
| var outputDiv = document.getElementById('output'); | |
| outputDiv.innerHTML = ''; | |
| outputDiv.appendChild(combinedImage); | |
| } | |
| </script> | |
| </body> | |
| </html> | |