Spaces:
Running
Running
| <html> | |
| <head> | |
| <title>Image Combiner</title> | |
| </head> | |
| <body> | |
| <img id="image1" src="https://drive.google.com/uc?id=1qxfPHJXyTeS60Jqou6TG6g13AWLPweZZ" crossorigin="anonymous" style="display: none;"> | |
| <img id="image2" src="https://drive.google.com/uc?id=11WKe16T11m70GVmXj5O3u-Tk85MQHPf8" crossorigin="anonymous" style="display: none;"> | |
| <button onclick="combineImages()">Combine</button> | |
| <canvas id="canvas" width="600" height="300"></canvas> | |
| <script> | |
| function combineImages() { | |
| var image1 = document.getElementById('image1'); | |
| var image2 = document.getElementById('image2'); | |
| var canvas = document.getElementById('canvas'); | |
| var ctx = canvas.getContext('2d'); | |
| image1.onload = function () { | |
| ctx.drawImage(image1, 0, 0, canvas.width / 2, canvas.height); | |
| image2.onload = function () { | |
| ctx.drawImage(image2, canvas.width / 2, 0, canvas.width / 2, canvas.height); | |
| }; | |
| image2.src = "https://drive.google.com/uc?id=11WKe16T11m70GVmXj5O3u-Tk85MQHPf8"; | |
| }; | |
| image1.src = "https://drive.google.com/uc?id=1qxfPHJXyTeS60Jqou6TG6g13AWLPweZZ"; | |
| } | |
| </script> | |
| </body> | |
| </html> | |