Files

index.html
index.html
  • <!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(0)">generate</button>
  • <button onclick="gen_image(1)">generate2</button>
  • <button onclick="gen_image(2)">generate3</button>
  • <button onclick="gen_image(3)">generate4</button>
  • <button onclick="gen_image(4)">generate5</button>
  • <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">
  • </div>
  • <div id="imgout2">
  • 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) {
  • return "<div class=\"p\" style=\"border-color: #" + s + "\"></div>"
  • 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>"
  • }
  • imgs = []
  • imgs.push("IMG STRING HERE")
  • imgs.push("IMG STRING HERE")
  • function gen_image(i) {
  • let out_element = document.getElementById("imgout")
  • data = imgs[i]
  • 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(hex_to_tag)
  • 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>