image2ascii.js

window.onload = function () {
    if (window.FileReader) {
        var input = document.getElementById("file");
        var result = document.getElementById("result");
        var canvas = document.getElementById("canvas");
        var context = canvas.getContext("2d");
        var img = document.getElementById("img");
        var width = 100;
        canvas.width = width;
        input.onchange = function () {
            var file = this.files[0];
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function () {
                var image = new Image();
                image.src = this.result;
                img.src = this.result;
                image.onload = function () {
                    context.clearRect(0, 0, width, parseInt(canvas.height, 10));
                    var height = image.height / image.width * width / 2;
                    canvas.height = height;
                    context.fillStyle = "#ffffff";
                    context.fillRect(0, 0, width, height);
                    context.drawImage(image, 0, 0, width, height);
                    var data = context.getImageData(0, 0, width, height);
                    var ascii = "";
                    for (var i = 0; i < height; i++) {
                        for (var j = 0; j < width; j++) {
                            var t = i * width * 4 + j * 4;
                            var r = data.data[t];
                            var g = data.data[t + 1];
                            var b = data.data[t + 2];
                            var a = data.data[t + 3];
                            var c = (r * 30 + g * 59 + b * 11) / 100;
                            if (c > 250) {
                                ascii += " ";
                            } else if (c > 230) {
                                ascii += "'";
                            } else if (c > 200) {
                                ascii += ":";
                            } else if (c > 175) {
                                ascii += "+";
                            } else if (c > 150) {
                                ascii += "*";
                            } else if (c > 125) {
                                ascii += "#";
                            } else if (c > 50) {
                                ascii += "W";
                            } else {
                                ascii += "@";
                            }
                        }
                        ascii += "\n";
                    }
                    result.innerHTML = ascii;
                };
            };
        };
    } else {
        alert("Your browser does not support this application!");