HTML5 Canvas很有趣的字符艺术画

ASCII art，使用JavaScript动态把图片转换成由ASCII码字符组成（拼接在一起）的图像。可用于图像识别领域。

html5, canvas, art

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 4878
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

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 = "/uploads/161001/normal1.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();
    }
});

编译

CSS

HTML

ASCII art，使用JavaScript动态把图片转换成由ASCII码字符组成（拼接在一起）的图像。可用于图像识别领域。

html5, canvas, art

编辑器支持Emmet

快捷键

ASCII art，使用JavaScript动态把图片转换成由ASCII码字符组成（拼接在一起）的图像。可用于图像识别领域。

html5, canvas, art

HTML5 Canvas很有趣的拷贝猫小游戏

使用HTML5 Canvas制作超炫动态电子艺术画作（风景画）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：