As webmaster of this site, one of the tasks I do often is to create posts with images. I devised (using AI) a small routine that would allow me to upload 2 images from my computer and use them to create a combined image with a pleasant background. The combined image looks like this when a screenshot is taken:
But the downloaded image is like this:
So I have a few issues that I would like to correct:
- The goal was to create an image 600px wide by 300px tall. The download file meets those dimensions, but the image as displayed on the screen is 2x that size. This is not all that big a deal, as WordPress squeezes it into the appropriate space, but ideally both should match.
- The next issue is obvious. My nice blue gradient on the site with the combined image is replaced with black in the download. I’d prefer the same gradient in the download.
- It does not work properly under all browsers. I’m using a Mac, and it works in Safari and DuckDuckGo, only.
- On occasions, there is only one image, but this routine will not process until both are loaded
So here are the changes I would like to make this more intuitive, easy to use and universally useful:
- Assume a default being 600px, but allow the user to enter a number to override that if desired, but maintain the overall 2/1 ratio.
- Allow for up to 3 images to be uploaded and add them to the combined image automatically as they are input, spacing them properly, one in the center, 2 as shown, and 3 resized as necessary to maintain proper spacing and a margin from all sides of at least 20px. In this case there is no need for a “combine” button.
- Allow the user to input a name to be used for the combined file.
- Whatever the size, the image displayed on the site needs to be downloaded exactly as displayed, with the proper background.
- Clean up the look and feel as you see fit for ease of use.
The routine can be run from here: https://tinyurl.com/grovephoto
A copy of the code is below:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Image Upload and Combine</title>
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #f0f0f0;
font-family: Roboto;
font-size: 16px;
}
#canvas {
border: 1px solid #ccc;
background: linear-gradient(to bottom, #add8e6, #00008b);
}
</style>
</head>
<body>
<h1>Grove Website Image Uploader</h1>
<br>
<input type=”file” id=”file1″ accept=”image/*”>
<br>
<input type=”file” id=”file2″ accept=”image/*”>
<br>
<button id=”combineBtn”>Combine Images</button>
<br>
<canvas id=”canvas” width=”600″ height=”300″></canvas>
<br>
<a id=”downloadLink” style=”display:none;”>Download Combined Image</a><script>
document.getElementById(‘combineBtn’).addEventListener(‘click’, function() {
const file1 = document.getElementById(‘file1’).files[0];
const file2 = document.getElementById(‘file2’).files[0];
if (!file1 || !file2) {
alert(‘Please upload both images.’);
return;
}const canvas = document.getElementById(‘canvas’);
const ctx = canvas.getContext(‘2d’);
const img1 = new Image();
const img2 = new Image();
const reader1 = new FileReader();
const reader2 = new FileReader();reader1.onload = function(e) {
img1.src = e.target.result;
};
reader2.onload = function(e) {
img2.src = e.target.result;
};img1.onload = function() {
const ratio1 = img1.width / img1.height;
const newHeight1 = Math.min(250, img1.height);
const newWidth1 = newHeight1 * ratio1;img2.onload = function() {
const ratio2 = img2.width / img2.height;
const newHeight2 = Math.min(250, img2.height);
const newWidth2 = newHeight2 * ratio2;const totalWidth = newWidth1 + newWidth2 + 60;
const startX = (canvas.width – totalWidth) / 2;ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img1, startX, (canvas.height – newHeight1) / 2, newWidth1, newHeight1);
ctx.drawImage(img2, startX + newWidth1 + 60, (canvas.height – newHeight2) / 2, newWidth2, newHeight2);const downloadLink = document.getElementById(‘downloadLink’);
downloadLink.href = canvas.toDataURL(‘image/jpeg’);
downloadLink.download = ‘combined_image.jpg’;
downloadLink.style.display = ‘block’;
downloadLink.innerText = ‘Download Combined Image’;
};
};reader1.readAsDataURL(file1);
reader2.readAsDataURL(file2);
reader2.readAsDataURL(file2);
});
</script>
<br><br><small>Current issues:<br>Tested on Mac using Safari and Duck-Duck-Go. No single images.<br>Works in Firefox, but no spacing.<br>Images will not combine in Chrome or Brave.</small>
</body>
</html>
Thank you for your interest!
User Comments