Domů Procházet Nápověda
Přihlásit se
tianyunperfect
/
web-base--
1
0
Rozštěpit 0
Soubory Úkoly 0 Pull Requesty 0 Wiki
Procházet zdrojové kódy

1

tianyun před 1 rokem
rodič
67cf66f0a3
revize
6d00fdf0a1
3 změnil soubory, kde provedl 61 přidání a 36 odebrání
Rozdělené zobrazení Ukázat statistiku rozdílových dat
  1. 10 3
      simple-demo/webp.html
  2. 48 14
      tmp/tmp.html
  3. 3 19
      tmp/tmp.js

+ 10 - 3
simple-demo/webp.html
Zobrazit soubor 

@@ -13,7 +13,10 @@
 
 </head>
 
 <body>
 
 <h1>粘贴图片并展示</h1>
 
-<p>右键粘贴图片，本地图片或网络图片地址都可以，将被压缩为webp格式并展示，压缩前：<span id="preSize"></span>, 压缩后：<span id="afterSize"></span><span id="status"></span>&nbsp;。&nbsp;<button onclick="rotateImage()">旋转90度</button>
 
+<p>右键粘贴图片，本地图片或网络图片地址都可以，将被压缩为webp格式并展示，压缩前：<span id="preSize"></span>, 压缩后：<span id="afterSize"></span><span id="status"></span>&nbsp;。&nbsp;
 
+    <button onclick="rotateImage()">旋转90度</button> &nbsp;。&nbsp;
 
+<!--    <button onclick="bigImage()">放大</button> &nbsp;。&nbsp;-->
 
+<!--    <button onclick="smallImage()">缩小</button> &nbsp;。&nbsp;-->
 
 </p>
 
 <div id="image-container">
 
     <img id="image-display" src="" alt="Image Display">
 
@@ -47,7 +50,6 @@
 
     });
 
 
 
-
 
     function compressImageToSize(blobFile, targetSize = 300 * 1024, maxIterations = 5, minQuality = 0.01) {
 
         let currentQuality = 0.8; // 初始压缩质量
 
         let iteration = 0; // 当前迭代次数
 
@@ -72,6 +74,7 @@
 
                 image.src = URL.createObjectURL(blobFile);
 
             });
 
         }
 
+
 
         function attemptCompression() {
 
             return new Promise((resolve, reject) => {
 
                 // 递归调用compressImage函数进行压缩
 
@@ -120,7 +123,10 @@
 
                 // 压缩为webp格式
 
                 compressImageToSize(blobFile).then(webpBlob => {
 
                     // 将压缩后的webp图片展示在页面上
 
-                    imageDisplay.src = URL.createObjectURL(webpBlob);
 
+                    // imageDisplay.src = URL.createObjectURL(webpBlob);
 
+                    const reader = new FileReader();
 
+                    reader.onloadend = () => {imageDisplay.src = reader.result;};
 
+                    reader.readAsDataURL(webpBlob);
 
                     showSize(webpBlob);
 
                 });
 
 
@@ -154,6 +160,7 @@
 
         image.src = rotatedImageUrl;
 
     }
 
 
+
 
 </script>
 
 </body>
 
 </html>

+ 48 - 14
tmp/tmp.html
Zobrazit soubor 

@@ -6,24 +6,58 @@
 
     <title>可爱登录页面</title>
 
 </head>
 
 <body>
 
-<div class="container">
 
-    <h1 class="text-center">欢迎登录~</h1>
 
-    <form>
 
-        <div class="form-group">
 
-            <label for="username">用户名</label>
 
-            <input type="text" class="form-control" id="username" placeholder="请输入用户名">
 
-        </div>
 
-        <div class="form-group">
 
-            <label for="password">密码</label>
 
-            <input type="password" class="form-control" id="password" placeholder="请输入密码">
 
-        </div>
 
-        <button type="submit" class="btn btn-primary">登录</button>
 
-    </form>
 
-</div>
 
+<ul role="menu" tabindex="-1" id=":r3q:" class="base-Popper-root MuiMenu-root Mui-expanded MuiMenu-variantOutlined MuiMenu-colorNeutral MuiMenu-sizeSm text-sm css-10pgqlj" style="position: absolute; inset: 0px 0px auto auto; margin: 0px; transform: translate(-609px, 222px);" data-popper-placement="bottom-end">
 
+    <li tabindex="-1" id=":r61:" role="menuitem" data-first-child="" class="MuiMenuItem-root MuiMenuItem-colorNeutral MuiMenuItem-variantPlain css-1ktfst">
 
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bookmark-plus w-4 h-auto">
 
+            <path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z"></path>
 
+            <line x1="12" x2="12" y1="7" y2="13"></line>
 
+            <line x1="15" x2="9" y1="10" y2="10"></line>
 
+        </svg>
 
+        置顶
 
+    </li>
 
+    <li tabindex="0" id=":r63:" role="menuitem" class="MuiMenuItem-root MuiMenuItem-colorNeutral MuiMenuItem-variantPlain css-v9ptvp">
 
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-pen-line w-4 h-auto">
 
+            <path d="M12 20h9"></path>
 
+            <path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z"></path>
 
+        </svg>
 
+        编辑
 
+    </li>
 
+    <li tabindex="-1" id=":r65:" role="menuitem" class="MuiMenuItem-root MuiMenuItem-colorNeutral MuiMenuItem-variantPlain css-v9ptvp">
 
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-share w-4 h-auto">
 
+            <path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"></path>
 
+            <polyline points="16 6 12 2 8 6"></polyline>
 
+            <line x1="12" x2="12" y1="2" y2="15"></line>
 
+        </svg>
 
+        分享
 
+    </li>
 
+    <li tabindex="-1" id=":r67:" role="menuitem" class="MuiMenuItem-root MuiMenuItem-colorWarning MuiMenuItem-variantPlain css-1yoneze">
 
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-archive w-4 h-auto">
 
+            <rect width="20" height="5" x="2" y="3" rx="1"></rect>
 
+            <path d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8"></path>
 
+            <path d="M10 12h4"></path>
 
+        </svg>
 
+        归档
 
+    </li>
 
+    <li tabindex="-1" id=":r69:" role="menuitem" class="MuiMenuItem-root MuiMenuItem-colorDanger MuiMenuItem-variantPlain css-1ofh05v">
 
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trash w-4 h-auto">
 
+            <path d="M3 6h18"></path>
 
+            <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
 
+            <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path>
 
+        </svg>
 
+        删除
 
+    </li>
 
+    <hr class="MuiDivider-root MuiDivider-horizontal !my-1 css-w2e6ki">
 
+    <div class="-mt-0.5 pl-2 pr-2 text-xs text-gray-400" data-last-child="">
 
+        <div class="mt-1 font-mono max-w-20 cursor-pointer truncate">ID: 7dizy8qk94UUaDrSTq4B2z</div>
 
+    </div>
 
+</ul>
 
 
 <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.16/vue.min.js"></script>
 
 <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
 
 <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.6/axios.min.js"></script>
 
 <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
 
 </body>
 
+<script>
 
+<!--   -->
 
+</script>
 
 </html>

+ 3 - 19
tmp/tmp.js
Zobrazit soubor 

@@ -1,20 +1,4 @@
 
-// 定义一个异步函数
 
-async function asyncFunction() {
 
-    // 异步操作，比如调用一个API或者执行一个异步任务
 
-    return new Promise((resolve) => {
 
-        setTimeout(() => {
 
-            resolve('异步操作完成');
 
-        }, 2000);
 
-    });
 
-}
 
-
 
-async function init() {
 
-
 
-    var data = {}
 
-    var res = await asyncFunction()
 
-    console.log(res)
 
-
 
-}
 
-
 
-init()
 
+// 查找所有class flex flex-row justify-end items-center select-none gap-1
 
 
+memo = document.querySelector('.flex.flex-row.justify-end.items-center.select-none.gap-1');
 
+// memo 父元素绑定 双击事件，如果