154 lines
5.2 KiB
HTML
154 lines
5.2 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport">
|
||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||
<script>
|
||
let img = new Image();
|
||
let logo;
|
||
|
||
//加载canvas
|
||
window.onload = () => {
|
||
let canvas = document.getElementById("canvas");
|
||
canvasInfo = canvas.getContext("2d");
|
||
document.getElementById('btn').onclick = start
|
||
document.getElementById('upButton').onchange = getImg;
|
||
};
|
||
|
||
//执行
|
||
let start = () => {
|
||
console.log('start')
|
||
//清空字符画
|
||
logo = "";
|
||
|
||
//先记录比率,如果宽，那么先缩放宽,再用比率算出长,反之同理
|
||
let rate = img.width / img.height;
|
||
if (rate > 1) {
|
||
img.width = 400;
|
||
img.height = 400 / rate;
|
||
} else {
|
||
img.height = 400;
|
||
img.width = 400 / rate;
|
||
}
|
||
|
||
//将图片绘制在canvas上
|
||
canvasInfo.drawImage(img, 0, 0, img.width, img.height);
|
||
|
||
//从canvas上获取像素信息
|
||
var imgData = canvasInfo.getImageData(0, 0, img.width, img.height);
|
||
|
||
//调整字符大小，追求更高精度就在这里调小
|
||
let size = 5 - parseInt(document.getElementById("thisSize").value);
|
||
//调整是否为彩色
|
||
let color = document.getElementById("thisColor").value !== "false";
|
||
|
||
//生成主体，逐个读取字符
|
||
for (let i = 0; i < img.width; i = i + size) {
|
||
for (let j = 0; j < img.height; j = j + size) {
|
||
let curPoint = (i * img.width + j) * 4; //×4是因为，1为r，2为g，3为b，4为a，四个是一组rgba值
|
||
let gray =
|
||
imgData.data[curPoint] * 0.299 +
|
||
imgData.data[curPoint + 1] * 0.587 +
|
||
imgData.data[curPoint + 2] * 0.114; //计算灰度值
|
||
thisColor = `rgb(${imgData.data[curPoint]},${
|
||
imgData.data[curPoint + 1]
|
||
},${imgData.data[curPoint + 2]})`; //保存像素点rgb值
|
||
color ? toText(gray, thisColor) : toText(gray, false); //有颜色就转化rgb值，没颜色就不转
|
||
}
|
||
logo = logo + "</br>";
|
||
}
|
||
|
||
document.getElementById("rightDiv").innerHTML = logo; //将字符串填充到html
|
||
};
|
||
|
||
//读取图片
|
||
let getImg = file => {
|
||
var reader = new FileReader();
|
||
reader.readAsDataURL(document.getElementById("upButton").files[0]);
|
||
reader.onload = function() {
|
||
img.src = reader.result;
|
||
};
|
||
};
|
||
|
||
//根据灰度转化字符，添加颜色
|
||
function toText(g, thisColor) {
|
||
if (thisColor) {
|
||
logo = logo + "<span style='color:" + thisColor + "'>";
|
||
}
|
||
if (g <= 17) {
|
||
logo = logo + "M";
|
||
} else if (g > 17 && g <= 34) {
|
||
logo = logo + "N";
|
||
} else if (g > 34 && g <= 51) {
|
||
logo = logo + "H";
|
||
} else if (g > 51 && g <= 68) {
|
||
logo = logo + "Q";
|
||
} else if (g > 68 && g <= 85) {
|
||
logo = logo + "&";
|
||
} else if (g > 85 && g <= 102) {
|
||
logo = logo + "O";
|
||
} else if (g > 102 && g <= 119) {
|
||
logo = logo + "C";
|
||
} else if (g > 119 && g <= 136) {
|
||
logo = logo + "?";
|
||
} else if (g > 136 && g <= 153) {
|
||
logo = logo + "7";
|
||
} else if (g > 153 && g <= 170) {
|
||
logo = logo + ">";
|
||
} else if (g > 170 && g <= 187) {
|
||
logo = logo + "!";
|
||
} else if (g > 187 && g <= 204) {
|
||
logo = logo + ":";
|
||
} else if (g > 204 && g <= 221) {
|
||
logo = logo + "-";
|
||
} else if (g > 221 && g <= 238) {
|
||
logo = logo + ";";
|
||
} else {
|
||
logo = logo + ".";
|
||
}
|
||
if (thisColor) {
|
||
logo = logo + "<span>";
|
||
}
|
||
}
|
||
</script>
|
||
<title>图片转字符</title>
|
||
</head>
|
||
|
||
<body>
|
||
<!-- 图片上传 -->
|
||
<form id="uf">
|
||
<input type="file" name="file" id="upButton" οnchange="getImg()" />
|
||
</form>
|
||
|
||
<!-- 选择字符画大小 -->
|
||
请输入精度等级：
|
||
<select id="thisSize">
|
||
<option value="1">1</option>
|
||
<option value="2">2</option>
|
||
<option value="3">3</option>
|
||
<option value="4">4</option>
|
||
<option value="5">5</option>
|
||
</select>
|
||
|
||
<!-- 选择颜色 -->
|
||
是否使用颜色：
|
||
<select id="thisColor">
|
||
<option value="true">是</option>
|
||
<option value="false">否</option>
|
||
</select>
|
||
|
||
<!-- 执行按钮 -->
|
||
<button id="btn">开始执行</button>
|
||
|
||
<!-- 辅助canvas，设为隐藏 -->
|
||
<div id="leftDiv">
|
||
<canvas id="canvas" width="400" height="400" style="display:none">Canvas</canvas>
|
||
</div>
|
||
|
||
<!-- 生成位置 -->
|
||
<div id="rightDiv" style="font-family:'Consolas';line-height: 0.5em;"></div>
|
||
</body>
|
||
|
||
</html> |