Image to ASCII converter

Developer
Laerin
Size
5,098 Kb
Views
6,072
  1. Image to ASCII converter Previews
  2. Image to ASCII converter HTML Codes
  3. Image to ASCII converter CSS Codes
  4. Image to ASCII converter JS Codes

How do I make an image to ascii converter?

Just a random thing for converting images to ascii art. Needs some work, but the result ain't half bad.. What is a image to ascii converter? How do you make a image to ascii converter? This script and codes were developed by Laerin on 26 December 2022, Monday.

Image to ASCII converter Previews
IQ Test

Image to ASCII converter - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Image to ASCII converter</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <img id='img1' src='data:image/png;base64,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'/> <script src="js/index.js"></script>
</body>
</html>

Image to ASCII converter - Script Codes CSS Codes

pre{ font-size: 8px; postion: absolute; top: 2px; left: 2px;
}
#img1{ position: absolute; top: 2px; left: 2px; opacity: 0.5;
}

Image to ASCII converter - Script Codes JS Codes

CP = window.CP || {};
CP.exitedLoop = CP.exitedLoop || function(o){};
function ascii(options){ this.chars = ['@', '#', '8', '&', 'o', ':', '*', '.', ' ']; this.values = [ 0 , 50, 70, 100, 130, 160, 180, 200, 230]; this.blockWidth = 4; this.blockHeight = 5; for (var prop in options) if (this.hasOwnProperty(prop)) this[prop] = options[prop]; this.canvas = document.createElement('canvas'); this.ctx = this.canvas.getContext('2d');
}
ascii.prototype = { convert: function(image){ this.canvas.width = image.width; this.canvas.height = image.height; this.ctx.clearRect(0, 0, image.width, image.height); this.ctx.drawImage(image, 0, 0, image.width, image.height); var idata = this.ctx.getImageData(0, 0, image.width, image.height); var data = idata.data; var output = document.createElement('pre'); var avgColor = {r: 0, g: 0, b: 0, a: 0}; var x, y; for (y = 0; y < image.height; y += this.blockHeight){ for (x = 0; x < image.width; x += this.blockWidth){ avgColor.r = 0; avgColor.g = 0; avgColor.b = 0; avgColor.a = 0; for (var i = 0; i < this.blockHeight; i++){ for (var j = 0; j < this.blockWidth; j++){ var index = ((y + i) * image.width + (x + j)) * 4; avgColor.r += data[index]; avgColor.g += data[index + 1]; avgColor.b += data[index + 2]; avgColor.a += data[index + 3]; } } var n = this.blockHeight * this.blockWidth; avgColor.r = avgColor.r / n; // TODO: Make Better avgColor.g = avgColor.g / n; avgColor.b = avgColor.b / n; avgColor.a = avgColor.a / n; var gray = (avgColor.r + avgColor.g + avgColor.b) / 3; // TODO: Make better if (avgColor.a < 50) gray = 255; for (var i = this.values.length - 1; i >= 0; i--){ if (gray >= this.values[i]){ output.textContent += this.chars[i]; break; } } } output.textContent += '\n'; } return output; }
}
var converter = new ascii({ blockWidth: 1, blockHeight: 2
});
var image = document.getElementById('img1');
var pre = converter.convert(image);
document.body.appendChild(pre);
Image to ASCII converter - Script Codes
Image to ASCII converter - Script Codes
Home Page Home
Developer Laerin
Username xgundam05
Uploaded December 26, 2022
Rating 3
Size 5,098 Kb
Views 6,072
Do you need developer help for Image to ASCII converter?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Laerin (xgundam05) Script Codes
Name
Stat Polygon using JS and SVG
YALP - Yet Another Life Pen
Perlin Terrain
Simple Raycast Engine
CSS Loading Graphic
CSS Hex Menu Idea
Threaded Voxel-based Terrain example
CSS Saber
Slalom Prototype
CSS Discrete Progress Bar
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!