CREATED USING CHATGPT !! With the prompt: “Make an image to lineprinter arts converter that shows the results on the webpage. then, How do I put this on a wordpress divy website page”.
Convert Image to ASCII Art
CODE:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Image to ASCII Art Converter</title>
<style>
body {
font-family: monospace;
text-align: center;
padding: 20px;
}
.ascii-art {
white-space: pre;
background-color: #f0f0f0;
padding: 10px;
border-radius: 8px;
margin-top: 20px;
}
</style>
</head>
<body>
<h2>Convert Image to ASCII Art</h2>
<input type=”file” id=”imageUpload” accept=”image/*”>
<br><br>
<canvas id=”canvas” style=”display: none;”></canvas>
<div id=”asciiArt” class=”ascii-art”></div>
<script>
const imageUpload = document.getElementById(‘imageUpload’);
const canvas = document.getElementById(‘canvas’);
const asciiArtDiv = document.getElementById(‘asciiArt’);
const ctx = canvas.getContext(‘2d’);
imageUpload.addEventListener(‘change’, function(e) {
const file = e.target.files[0];
const reader = new FileReader();
reader.onload = function(event) {
const img = new Image();
img.src = event.target.result;
img.onload = function() {
const maxWidth = 100; // Adjust for resolution
const ratio = maxWidth / img.width;
const newHeight = img.height * ratio;
canvas.width = maxWidth;
canvas.height = newHeight;
ctx.drawImage(img, 0, 0, maxWidth, newHeight);
const imageData = ctx.getImageData(0, 0, maxWidth, newHeight);
const asciiArt = convertToAscii(imageData);
asciiArtDiv.innerText = asciiArt;
}
};
reader.readAsDataURL(file);
});
function convertToAscii(imageData) {
const chars = [‘@’, ‘#’, ‘S’, ‘%’, ‘?’, ‘*’, ‘+’, ‘;’, ‘:’, ‘,’, ‘.’]; // Characters for ASCII
const { data, width, height } = imageData;
let ascii = ”;
for (let y = 0; y < height; y++) {
for (let x = 0; x < width; x++) {
const offset = (y * width + x) * 4;
const red = data[offset];
const green = data[offset + 1];
const blue = data[offset + 2];
const brightness = (red + green + blue) / 3;
const charIndex = Math.floor((brightness / 255) * (chars.length – 1));
ascii += chars[charIndex];
}
ascii += ‘\n’;
}
return ascii;
}
</script>
</body>
</html>