Spaces:
Running
Running
File size: 1,820 Bytes
0281ed1 e6a2c7d 4621cb2 e6a2c7d 4621cb2 e6a2c7d 4621cb2 e6a2c7d 4621cb2 e6a2c7d 0281ed1 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
<!DOCTYPE html>
<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>
|