跳到主要内容

前端库

dom转canvas​

Screenshots with JavaScript

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>html2canvas example</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    <link rel="stylesheet" type="text/css" href="./alicss.css" />
    <style type="text/css">
        body{
            background-color: #fff;
        }
        #capture  {
            box-sizing: border-box;
            width: 81px;
            height: 81px;
            border-radius: 15px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .on{
            background-color: #f9bc73;
            color: #1d1d1d;
            border: 4px solid #1d1d1d;
        }
        .old {
            background-color: transparent;
            border: 4px solid #fff;
            color: #fff;
        }
        .ali-icon{
            font-size: 50px;
        }
    </style>
</head>
<script type="text/javascript">
    function takeScreenshot() {
        html2canvas(document.querySelector("#capture"),{
            backgroundColor: null
        }).then(canvas => {
            document.body.appendChild(canvas)
        });
    }

</script>

<body>

    <div id="capture" class="old">
        <div class="ali-icon-my ali-icon"></div>
    </div>
    <div id="capture" class="on">
        <div class="ali-icon-my ali-icon"></div>
    </div>
    <input type="button" value="截图" onclick="takeScreenshot()">
</body>

</html>

JSON2TS​

transform json/js object to Typesciprt interface

::: 后续转为浏览器插件方便使用 :::

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }

      .header {
        width: 100vw;
        height: 120px;
        background: #5f6bda;
        color: white;
      }

      .header h1 {
        margin-left: 25%;
        font-size: 60px;
      }

      .header p {
        margin-left: 25%;
      }

      .wrapper {
        display: flex;
        flex-direction: column;
        width: 50vw;
        margin: 0 auto;
      }

      textarea {
        margin: 20px 0;
        padding: 12px;
        border: 1px solid #ddd;
        border-radius: 6px;
      }

      .button {
        width: 160px;
        height: 40px;
        margin: 0px 24px;
        background: #5f6bda;
        border: none;
        color: white;
        font-size: 16px;
        cursor: pointer;
      }

      .footer {
        text-align: center;
        margin: 24px 0;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <textarea
        name=""
        id="input"
        cols="50"
        rows="20"
        placeholder="enter JSON or JS Object"
      ></textarea>
      <button class="button" id="btn">transform JSON</button>
      <textarea
        name=""
        id="output"
        cols="50"
        rows="20"
        placeholder="transform result"
      ></textarea>
    </div>
    <script>
      const btn = document.getElementById("btn");

      let globalArr = [];

			const collectionListObject = (arr) => {
				const target = {};
				(arr ||[]).forEach(item => {
					Object.keys(item).forEach((key) => {
						if (!target[key]) {
							target[key] = item[key];
						}
					});
				});
				return target;
			}

      const handleItemType = (key, item) => {
        if (item === null) return "null";
        if (item === "true" || item === "false") return "`${boolean}`";
        const type = typeof item;
        if (type === "object") {
          const capitalized = key.charAt(0).toUpperCase() + key.slice(1);
          if (Array.isArray(item)) {
            return `${createInerface(`${capitalized}Item`, collectionListObject(item))}[]`;
          }
          return createInerface(capitalized, item);
        }
        return typeof item;
      };

      const createInerface = (interfaceName, object) => {
        const keys = Object.keys(object);
        if (keys.length === 0) return "any";
        const items = (keys || [])
          .map((key) => {
            return `  ${key}?: ${handleItemType(key, object[key])};`;
          })
          .join("\n");
        const resultStr = `
interface I${interfaceName} {
${items}
}
				`;
        globalArr.push(resultStr);
        return 'I'+interfaceName;
      };

      const transform = (string) => {
        try {
          eval(`window.__tmpStr__ = ${string}`);
          createInerface("Root", window.__tmpStr__);
          delete window.__tmpStr__;
          const res = globalArr.join("\n");
          globalArr = [];
          return res;
        } catch (e) {
          alert("check the input spell is correct! \n" + e);
        }
      };

      btn.addEventListener("click", () => {
        const input = document.getElementById("input");
        const output = document.getElementById("output");
        if (input.value.indexOf("<script") !== -1) {
          alert("存在非法字符哟");
        } else {
          output.value = transform(input.value);
        }
      });
    </script>
  </body>
</html>