ASCII art

Developer
Massimo
Size
2,756 Kb
Views
56,672
  1. ASCII art Previews
  2. ASCII art HTML Codes
  3. ASCII art CSS Codes
  4. ASCII art JS Codes

How do I make an ascii art?

Click to switch between original image and generated ascii . What is a ascii art? How do you make a ascii art? This script and codes were developed by Massimo on 17 September 2022, Saturday.

ASCII art Previews
IQ Test

ASCII art - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>ASCII art</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <img id="image"/>
<canvas id="c"></canvas> <script src="js/index.js"></script>
</body>
</html>

ASCII art - Script Codes CSS Codes

body { margin: 0; overflow: hidden; background: #000;
}
body canvas, body img { position: absolute; left: 50%; top: 50%;
}

ASCII art - Script Codes JS Codes

var c = document.getElementById('c'), c_ = document.createElement('canvas'), ctx = c.getContext('2d'), ctx_ = c_.getContext('2d'), image = document.getElementById('image'), img, original = false, src = "https://images.moviepilot.com/" + "image/upload/c_fill,h_470,q_auto:" + "good,w_620/bnmdox19jjtoondtecuc.jpg", s = { 'scale': 10, 'font size': 10, 'color': '#fff' };
image.src = src;
image.style.display = 'none';
img = new Image();
img.crossOrigin = 'anonymous';
img.src = src;
img.onload = function() { c.width = img.width; c.height = img.height; c.style.marginLeft = image.style.marginLeft = -c.width/2 + 'px'; c.style.marginTop = image.style.marginTop = -c.height/2 + 'px'; c_.width = img.width = c.width / s.scale; c_.height = img.height = c.height / s.scale; draw();
}
function symbol(gs) { var s; if(gs > 230) { s = '.'; } else if(gs > 195) { s = ','; } else if(gs > 170) { s = ';'; } else if(gs > 155) { s = '*'; } else if(gs > 130) { s = 'o'; } else if(gs > 105) { s = '&'; } else if(gs > 80) { s = '8'; } else if(gs > 60) { s = '#'; } else { s = '@'; } return s;
}
function draw() { ctx_.drawImage(img, 0, 0, img.width, img.height); var imgData = ctx_.getImageData(0, 0, c_.width, c_.height), pixels = imgData.data; for(var y = 0; y < c_.height; y++) { for(var x = 0; x < c_.width; x++) { var index = 4*(x + y*c_.width), r = pixels[index + 0], g = pixels[index + 1], b = pixels[index + 2], greyscl = Math.round((r + g + b)/3); var symb = symbol(greyscl); ctx.fillStyle = s.color; ctx.font = s['font size'] + "px Courier New"; ctx.fillText(symb, x*s.scale, y*s.scale); } }
}
c.addEventListener('click', function() { original = !original; if(original) { ctx.clearRect(0, 0, c.width, c.height); image.style.display = 'block'; } else { image.style.display = 'none'; draw(); }
});
ASCII art - Script Codes
ASCII art - Script Codes
Home Page Home
Developer Massimo
Username _massimo
Uploaded September 17, 2022
Rating 4.5
Size 2,756 Kb
Views 56,672
Do you need developer help for ASCII art?

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!

Massimo (_massimo) Script Codes
Name
Pacman
Css preloader
Upside down cat
Bernard the polar bear
Underwater particles
Pathfinder
Css spirals
Fake 3D
Mandala drawing concept
Css tabs
Create amazing blog posts 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!