Hugging Face's logo

Spaces:
lotrlol
/
mockupmaker
Running

App Files Community
lotrlol commited on
Commit
4621cb2
•
1 Parent(s): e6a2c7d

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +33 -13
index.html CHANGED
@@ -4,27 +4,47 @@
4
  <title>Image Combiner</title>
5
  </head>
6
  <body>
7
- <img id="image1" src="https://drive.google.com/uc?id=1qxfPHJXyTeS60Jqou6TG6g13AWLPweZZ" crossorigin="anonymous" style="display: none;">
8
- <img id="image2" src="https://drive.google.com/uc?id=11WKe16T11m70GVmXj5O3u-Tk85MQHPf8" crossorigin="anonymous" style="display: none;">
9
- <button onclick="combineImages()">Combine</button>
10
- <canvas id="canvas" width="600" height="300"></canvas>
 
 
 
 
 
11
 
12
  <script>
13
  function combineImages() {
 
14
  var image1 = document.getElementById('image1');
15
  var image2 = document.getElementById('image2');
16
 
17
- var canvas = document.getElementById('canvas');
 
 
 
 
 
18
  var ctx = canvas.getContext('2d');
19
 
20
- image1.onload = function () {
21
- ctx.drawImage(image1, 0, 0, canvas.width / 2, canvas.height);
22
- image2.onload = function () {
23
- ctx.drawImage(image2, canvas.width / 2, 0, canvas.width / 2, canvas.height);
24
- };
25
- image2.src = "https://drive.google.com/uc?id=11WKe16T11m70GVmXj5O3u-Tk85MQHPf8";
26
- };
27
- image1.src = "https://drive.google.com/uc?id=1qxfPHJXyTeS60Jqou6TG6g13AWLPweZZ";
 
 
 
 
 
 
 
 
 
28
  }
29
  </script>
30
  </body>
 
4
  <title>Image Combiner</title>
5
  </head>
6
  <body>
7
+ <h1>Image Combiner</h1>
8
+ <div>
9
+ <img src="https://drive.google.com/uc?id=1qxfPHJXyTeS60Jqou6TG6g13AWLPweZZ" id="image1">
10
+ <img src="https://drive.google.com/uc?id=11WKe16T11m70GVmXj5O3u-Tk85MQHPf8" id="image2">
11
+ <button onclick="combineImages()">Combine Images</button>
12
+ </div>
13
+ <div id="output">
14
+ <!-- The combined image will be shown here -->
15
+ </div>
16
 
17
  <script>
18
  function combineImages() {
19
+ // Get references to the two images
20
  var image1 = document.getElementById('image1');
21
  var image2 = document.getElementById('image2');
22
 
23
+ // Create a canvas element
24
+ var canvas = document.createElement('canvas');
25
+ canvas.width = image1.width + image2.width;
26
+ canvas.height = Math.max(image1.height, image2.height);
27
+
28
+ // Get the 2D context of the canvas
29
  var ctx = canvas.getContext('2d');
30
 
31
+ // Draw the first image on the left side of the canvas
32
+ ctx.drawImage(image1, 0, 0, image1.width, image1.height);
33
+
34
+ // Draw the second image on the right side of the canvas
35
+ ctx.drawImage(image2, image1.width, 0, image2.width, image2.height);
36
+
37
+ // Create a new combined image URL
38
+ var combinedImageURL = canvas.toDataURL();
39
+
40
+ // Create a new image element to display the combined image
41
+ var combinedImage = new Image();
42
+ combinedImage.src = combinedImageURL;
43
+
44
+ // Add the combined image to the output div
45
+ var outputDiv = document.getElementById('output');
46
+ outputDiv.innerHTML = '';
47
+ outputDiv.appendChild(combinedImage);
48
  }
49
  </script>
50
  </body>