基于 canvas 将图片转化成字符画

levinit 发布于2019-08-19 14:19 / 786人阅读

摘要：字符画大家一定非常熟悉了，那么如何把一张现有的图片转成字符画呢让这个可能变成了现实，通过，可以很轻松实现这个功能。我们只能根据图片宽高，来定义一个间隔，横向间隔，纵向间隔取一次像素，这样可以保证生成的字符画大小和原图保持一致。

猛点这里看高清妹子图。

字符画大家一定非常熟悉了，那么如何把一张现有的图片转成字符画呢？ HTML5 让这个可能变成了现实，通过 canvas，可以很轻松实现这个功能。

其实原理很简单：扫描图片相应位置的像素点，再计算出其灰度值，根据灰度值的大小，分别用字符 #*+“ 和空格来填充。

下面是源码：

HTML：一个 canvas 元素 #cv，一个字符画容器 #txt。

css：由于每一行用 p 来填充，所以 p 的 height 和 font-size 大小应该一致都是 12px，这样可以避免每行出现空隙。

* {margin: 0;padding: 0;}
body {font-size: 12px; margin: 10px; font-family: simsun; background: #fff;}
p { height: 12px;}
p.ts { margin: 10px 0 0 0; width: 500px; float: left;}
span {width: 12px;}
#cv, #txt {float: left;}
#cv { margin-right: 5px;}

javascript：请看注释和下面的解释。

var cv = document.getElementById("cv");
var c = cv.getContext("2d");
var txtDiv = document.getElementById("txt");
var fileBtn = document.getElementById("up-button");
var img = new Image();
img.src = "a.jpg";
img.onload = init; // 图片加载完开始转换
fileBtn.onchange = getImg;

// 根据灰度生成相应字符
function toText(g) {
    if (g <= 30) {
        return "#";
    } else if (g > 30 && g <= 60) {
        return "&";
    } else if (g > 60 && g <= 120) {
        return "$";
    }  else if (g > 120 && g <= 150) {
        return "*";
    } else if (g > 150 && g <= 180) {
        return "o";
    } else if (g > 180 && g <= 210) {
        return "!";
    } else if (g > 210 && g <= 240) {
        return ";";
    }  else {
        return " ";
    }
}


// 根据rgb值计算灰度
function getGray(r, g, b) {
    return 0.299 * r + 0.578 * g + 0.114 * b;
}

// 转换
function init() {
    txtDiv.style.width = img.width + "px";
    cv.width = img.width;
    cv.height = img.height;
    c.drawImage(img, 0, 0);
    var imgData = c.getImageData(0, 0, img.width, img.height);
    var imgDataArr = imgData.data;
    var imgDataWidth = imgData.width;
    var imgDataHeight = imgData.height;
    var html = "";
    for (h = 0; h < imgDataHeight; h += 12) {
        var p = "";
        for (w = 0; w < imgDataWidth; w += 6) {
            var index = (w + imgDataWidth * h) * 4;
            var r = imgDataArr[index + 0];
            var g = imgDataArr[index + 1];
            var b = imgDataArr[index + 2];
            var gray = getGray(r, g, b);
            p += toText(gray);
        }
        p += "";
        html += p;
    }
    txtDiv.innerHTML = html;
}

// 获取图片
function getImg(file) {
    var reader = new FileReader();
    reader.readAsDataURL(fileBtn.files[0]);
    reader.onload = function () {
        img.src = reader.result;
    }
}

如何取到相应像素点的灰度？

getImageData 方法返回一个对象，每个像素点的 rgba 值都保存在其 data 属性下面，这是一个一位数组，也就是说，rgba 分别对应一个值，然后接着就是一下像素点的 rgba，假设 getImageData.data 的值为 [1,2,3,4,5,6,7,8]，那么 getImageData 对象范围就包含了 2 个像素点，第一个像素点的 rgba 值分别是 1,2,3,4，第二个像素点的就是 4,5,6,7,8。因此，我们在取每个像素点的 rgba 值的时候其 index 应该在像素点的索引值上乘以 4，然后通过 getGray() 计算灰度。

如何对应到字符？

再考虑一下每个字符串的宽度是 6px，高度是 12px，所以我们不可能每个像素点都要对应一个字符，那样生成的图案将非常之大。我们只能根据图片宽高，来定义一个间隔，横向间隔 6px，纵向间隔 12px 取一次像素，这样可以保证生成的字符画大小和原图保持一致。

最后请看 demo： http://justjavac.com/img2txt/

原文链接： http://justjavac.com/javascript/2013/09/25/ji-yu-canvas-jiang-tu-pian-zhuan-hua-cheng-zi-fu-hua.html

最后附上几张图

idc机房托管超融合服务器将c语言转化成c++ 字符串转化成date byte数组转化成字符串 js将图片压缩成64

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/77920.html

手对手的教你用canvas画一个简单的海报

摘要：啦啦啦，首先说下需求，产品想让用户在我们内，分享一张图片到微信等平台。图片中包含用户的姓名头像和带着自己信息的二维码。然后，如何生成这张海报呢首先我们老大告诉我有一个插件叫其作用就是可以将节点转化成图片，是个不错的东西。啦啦啦，首先说下需求，产品想让用户在我们app内，分享一张图片到微信、qq等平台。图片中包含用户的姓名、头像、和带着自己信息的二维码。然后，如何生成这张海报呢~~~首...

verano 2019-08-23 13:57 评论0 收藏0
手对手的教你用canvas画一个简单的海报

摘要：啦啦啦，首先说下需求，产品想让用户在我们内，分享一张图片到微信等平台。图片中包含用户的姓名头像和带着自己信息的二维码。然后，如何生成这张海报呢首先我们老大告诉我有一个插件叫其作用就是可以将节点转化成图片，是个不错的东西。啦啦啦，首先说下需求，产品想让用户在我们app内，分享一张图片到微信、qq等平台。图片中包含用户的姓名、头像、和带着自己信息的二维码。然后，如何生成这张海报呢~~~首...

BlackHole1 2019-08-02 12:13 评论0 收藏0
手对手的教你用canvas画一个简单的海报

摘要：啦啦啦，首先说下需求，产品想让用户在我们内，分享一张图片到微信等平台。图片中包含用户的姓名头像和带着自己信息的二维码。然后，如何生成这张海报呢首先我们老大告诉我有一个插件叫其作用就是可以将节点转化成图片，是个不错的东西。啦啦啦，首先说下需求，产品想让用户在我们app内，分享一张图片到微信、qq等平台。图片中包含用户的姓名、头像、和带着自己信息的二维码。然后，如何生成这张海报呢~~~首...

cyixlq 2019-08-30 15:54 评论0 收藏0
手对手的教你用canvas画一个简单的海报

摘要：啦啦啦，首先说下需求，产品想让用户在我们内，分享一张图片到微信等平台。图片中包含用户的姓名头像和带着自己信息的二维码。然后，如何生成这张海报呢首先我们老大告诉我有一个插件叫其作用就是可以将节点转化成图片，是个不错的东西。啦啦啦，首先说下需求，产品想让用户在我们app内，分享一张图片到微信、qq等平台。图片中包含用户的姓名、头像、和带着自己信息的二维码。然后，如何生成这张海报呢~~~首...

Rango 2019-08-05 15:42 评论0 收藏0
html dom 转化成图片踩坑记（canvas toDataURL）

摘要：需求在开发过程中遇到这么一个需求，页面需要将一个转化成图片，便于用户保存。需求在开发过程中遇到这么一个需求，h5页面需要将一个html dom转化成图片，便于用户保存。面向百度搜索第三方得 html2canvas 和 dom-to-image 两者在写这篇笔记之前在github上的星星数分别是 dom-to-image 4k ⭐️ html2canvas 13.7k ⭐️ 两者...

cyixlq 2019-08-05 15:06 评论0 收藏0