<![CDATA[--------------
<!DOCTYPE html>
<html>
<head>
<title>Image Drag and Drop</title>
<style>
#drop-zone {
width: 400px;
height: 400px;
border: 2px dashed gray;
margin: 20px auto;
text-align: center;
line-height: 400px;
font-size: 20px;
}
#image-element {
max-width: 100%;
max-height: 400px;
margin-top: 20px;
}
#download-button {
display: none;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="drop-zone">Drag and drop an image here</div>
<img id="image-element" src="" alt="Processed Image">
<a id="download-button" href="#" download="">Download</a>
<script>
// Get the HTML elements
const dropZone = document.getElementById('drop-zone');
const imageElement = document.getElementById('image-element');
const downloadButton = document.getElementById('download-button');
// Add event listeners for drag and drop events
dropZone.addEventListener('dragover', handleDragOver);
dropZone.addEventListener('drop', handleFileDrop);
// Handle the dragover event to allow the drop
function handleDragOver(event) {
event.preventDefault();
}
// Handle the drop event
function handleFileDrop(event) {
event.preventDefault();
// Get the dropped file
const file = event.dataTransfer.files[0];
// Create a FileReader object to read the file
const reader = new FileReader();
// Set up the onload event handler
reader.onload = function(e) {
// Create a new image element
const newImage = new Image();
// Set the onload event handler to handle image loading
newImage.onload = function() {
// Perform the image processing steps
const processedImage = processImage(newImage);
// Display the processed image
imageElement.src = processedImage.src;
// Set the download link properties
downloadButton.href = processedImage.src;
downloadButton.setAttribute('download', file.name);
// Show the download button
downloadButton.style.display = 'block';
};
// Set the source of the new image to the dropped file
newImage.src = e.target.result;
};
// Read the dropped file as a data URL
reader.readAsDataURL(file);
}
// Function to process the image and fit it into the criteria
function processImage(image) {
// Create a canvas element
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
// Ensure the canvas dimensions are power-of-two (POT)
const canvasWidth = Math.pow(2, Math.floor(Math.log2(image.width)));
const canvasHeight = Math.pow(2, Math.floor(Math.log2(image.height)));
canvas.width = canvasWidth;
canvas.height = canvasHeight;
// Draw the image on the canvas
ctx.drawImage(image, 0, 0, canvasWidth, canvasHeight);
// Convert the image to RGBA format if necessary
if (ctx.getImageData(0, 0, 1, 1).data.length !== 4) {
const imageData = ctx.getImageData(0, 0, canvasWidth, canvasHeight);
const rgbaImageData = convertToRGBA(imageData);
ctx.putImageData(rgbaImageData, 0, 0);
}
// Create a new image element with the processed image data
const processedImage = new Image();
processedImage.src = canvas.toDataURL();
return processedImage;
}
// Function to convert the image data to RGBA format
function convertToRGBA(imageData) {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = imageData.width;
canvas.height = imageData.height;
// Create a new ImageData object with RGBA format
const rgbaImageData = ctx.createImageData(imageData.width, imageData.height);
// Convert the pixel data to RGBA format
for (let i = 0; i < imageData.data.length; i += 4) {
rgbaImageData.data[i] = imageData.data[i];
rgbaImageData.data[i + 1] = imageData.data[i + 1];
rgbaImageData.data[i + 2] = imageData.data[i + 2];
rgbaImageData.data[i + 3] = 255; // Set alpha channel to opaque
}
return rgbaImageData;
}
</script>
</body>
</html>
</plaintext>]]></plaintext>