<!DOCTYPE html>
<html>
<style>
.p {
width: 0px;
height: 0px;
display: table-cell;
border: solid #000000 2x;
}
.p0 {
width: 0px;
height: 0px;
display: table-cell;
border: solid #000000 0.5x;
}
.p1 {
width: 0px;
height: 0px;
display: table-cell;
border: solid #000000 1x;
}
.p2 {
width: 0px;
height: 0px;
display: table-cell;
border: solid #000000 2x;
}
.p3 {
width: 0px;
height: 0px;
display: table-cell;
border: solid #000000 3x;
}
body {
overflow-y: auto;
height: 100%;
margin :0;
background-color: #ffffff;
color: #000000;
}
html{
background-color: #21333D;
height:100%;
}
</style>
<body id="body">
<button onclick="gen_image(img_data, target_element_id, 0)">scale 0</button>
<button onclick="gen_image(img_data, target_element_id, 1)">scale 1</button>
<button onclick="gen_image(img_data, target_element_id, 2)">scale 2</button>
<button onclick="gen_image(img_data, target_element_id, 3)">scale 3</button>
<p>output: </p>
<div id="imgout">
loading img
</div>
<script>
function divide(s, n) {
let offset = 0
let r = []
while(true) {
r.push(s.slice(0, n ))
s = s.slice(n)
if (s.length == 0) {
break
}
}
return r
}
function hex_to_tag(s, scale) {
return "<div class=\"p" + scale + "\" style=\"border-color: #" + s + "\"></div>"
}
function to_line(s) {
return "<div>" + s.join("") + "</div>"
}
function gen_image(img, target_element_id, scale) {
let out_element = document.getElementById(target_element_id)
data = img
data = data.replace("\n", "")
let width = Number(data.split(" ")[0])
data = data.split(" ")[1]
data = divide(data,6)
data = data.map(function(i) {return hex_to_tag(i, scale)})
data = divide(data, width)
data = data.map(to_line)
out_element.innerHTML = data.join("")
}
img_data = "IMG_DATA_HERE"
target_element_id = "imgout"
scale = "1"
gen_image(img_data, target_element_id, scale)
</script>
</body>
</html>