汐岑小窝

  • 首页
  • 网络资源
  • 技术教程
  • 软件工具
  • 网站源码
汐岑小窝
一个零零后的博客小窝
  1. 首页
  2. 技术教程
  3. 正文

基于canvas的图片转字符画工具

2018年7月21日 1637点热度 0人点赞 3条评论

这是一个在线生成字符画的html单页源代码,可用图片来生成字符画用来放记事本里好看,哈哈哈!看这文章的都知道干嘛就不瞎扯了。复制下面代码到在线可视化工具粘贴运行上传要生成的图片。注图片要大一点,太小看不出来

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>基于canvas的图片转字符画工具</title>
    <style type="text/css">
    * {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;}
    .bt{ height: 37px; }
    form, input {width: 73px;height: 27px;}
    form {
        position: relative;
        float: left;
        margin: 0 10px 0 0;
    }
    #up-button{
        position: absolute;
        right: 0;
        top: 0;
        cursor: pointer;
        opacity: 0;
        filter: alpha(opacity=0);
        outline: none;
    }
    #button{
    }
    iframe ,#cv{display: none;}
</style>
    <script id="jquery_183" type="text/javascript" class="library" src="//cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="//sandbox.runjs.cn/uploads/rs/485/2vzbn4yy/clipboard.min.js"></script>
</head>
<body>
<div class="bt">
    <input type="button" id="copy" data-clipboard-target="#txt" value="复制文字"/>长满1600px宽满2840px;图片尺寸越大生成的文字代码越清晰,浏览器保存网页为图片。
    <form id="uf">
        <input type="file" name="file" id="up-button"/>
        <input type="button" id="button" value="选择图片"/>
    </form>
</div>
<canvas id="cv">fuck ie</canvas>
<div id="txt"></div>
 </body>
</html>
        <style> </style>
                <script>var cv = document.getElementById('cv');
var c = cv.getContext('2d');
var txtDiv = document.getElementById('txt');
var fileBtn = document.getElementById("up-button");
var copyBtn = document.getElementById("coby");
var img = new Image();
img.src = 'abn.jpg';
img.onload = init; // 图片加载完开始转换
fileBtn.onchange = getImg;
// 根据灰度生成相应字符
function toText(g) {
    if (g <= 30) {
        return '8';
    } 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 imgDataimgDataArr = imgData.data;
    var imgDataimgDataWidth = imgData.width;
    var imgDataimgDataHeight = imgData.height;
    var html = '';
    for (h = 0; h < imgDataHeight; h += 12) {
        var p = '<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 += '</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;
    }
}
var clipboard3 = new Clipboard('#copy');
clipboard3.on('success', function(e) {
    console.log(e);
    alert("复制成功!")
});
clipboard3.on('error', function(e) {
    console.log(e);
    alert("测试4复制失败!请手动复制")
});
</script>

转载诗梦博客

标签: canvas 图片转换
最后更新:2018年7月21日

汐岑君

这个人很懒,什么都没留下

打赏 点赞
< 上一篇
下一篇 >
分类
  • SEO优化
  • Special
  • 技术教程
  • 文章广告
  • 杂文语录
  • 网站源码
  • 网络资源
  • 软件工具
归档
  • 2020年5月
  • 2020年4月
  • 2020年3月
  • 2019年12月
  • 2019年5月
  • 2019年4月
  • 2019年2月
  • 2019年1月
  • 2018年12月
  • 2018年9月
  • 2018年8月
  • 2018年7月
  • 2018年6月
  • 2018年5月
  • 2018年4月
  • 2018年3月
  • 2018年2月
  • 2018年1月
  • 2017年12月
  • 2017年11月
  • 2017年10月
  • 2017年9月
  • 2017年8月
  • 2017年7月
  • 2017年6月
  • 2017年5月
  • 2017年4月

COPYRIGHT © 2021 汐岑小窝. ALL RIGHTS RESERVED.

THEME KRATOS MADE BY VTROIS

赣ICP备19000739号-2