Displaying image pixels into ASCII
Convert pixel data into series of letters and characters.
HTML
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <title>Image to ASCII</title>
5 <style>
6 * {
7 padding: 0;
8 margin: 0;
9 background-color: white;
10 font: 1em monospace;
11 line-height: 6pt;
12 color: black;
13 }
14 </style>
15 </head>
16 <body>
17
18 <img src="https://drive.google.com/uc?id=1Pz4u6FmmBs07KFPI2YnEwoqpbUY46F36" id="image" alt="" style="display: none;" />
19
20 <script>
21 const charset = 'MNFV$I*:.'.split('')
22 const len = charset.length-1
23
24 document.getElementById("image").onload = function() {
25 let canvas = document.createElement('canvas')
26 canvas.width = this.width
27 canvas.height = this.height
28 let ctx = canvas.getContext('2d');
29 ctx.drawImage(this, 0, 0);
30 var data= ctx.getImageData(0, 0, this.width, this.height)
31
32 for( let y=0; y<this.height; y++ )
33 {
34 var s = ""
35 for( let x=0; x<this.width; x++ )
36 {
37 var i = ( x + y * this.width ) * 4
38 var r = data.data[i];
39 var g = data.data[i + 1];
40 var b = data.data[i + 2];
41 var a = data.data[i + 3];
42
43 var ave = (r+g+b) / 3
44 var n = Math.round( (ave * len) / 255 )
45 s += charset[n]
46 }
47 var span = document.createElement("span")
48 span.innerHTML = s.replace(/ /gi, ' ')
49 document.body.append( span )
50 document.body.append( document.createElement("br") )
51 }
52 }
53 </script>
54 </body>
55 </html>
