imghost优化选择图片后的显示尺寸

imghost优化选择图片后的显示尺寸 <div class="mb-3"> <img id="img_input" src="" style="max-width: 100%; max-height: 1024px;"> </div>
crazypeace · Jan 22, 2024 · 905ffa9 · 905ffa9
1 parent a57baed
commit 905ffa9
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 20 deletions.
diff --git a/index.html b/index.html
@@ -28,7 +28,7 @@ <h5 class="card-title"> </h5>
           <span class="input-group-text" id="basic-addon2">Custom Short URL</span>
         </div>
         <input type="text" class="form-control" id="keyPhrase" aria-describedby="basic-addon2" placeholder="As you wish">
-      </div>     
+      </div>
 
       <div class="input-group mb-3">
         <button class="btn btn-primary" type="button" onclick='shorturl()' id="addBtn">Shorten it</button>
@@ -51,7 +51,7 @@ <h5 class="card-title"> </h5>
       </div>
 
       <div class="card-text">
-        <div classs="list-group" id="urlList"> 
+        <div classs="list-group" id="urlList">
           <div class="list-group-item">
             <button type="button" class="btn btn-danger" onclick='deleteShortUrl("4rEbzm")'>X</button>
             <button type="button" class="btn btn-info" onclick='queryVisitCount("4rEbzm")'>?</button>
@@ -65,7 +65,7 @@ <h5 class="card-title"> </h5>
             <span>texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</span>
           </div>
         </div>
-      </div>            
+      </div>
     </div>
 
     <div class="card-footer">
@@ -89,7 +89,7 @@ <h5 class="modal-title" id="resultModalLabel">Result</h5>
         </div>
       </div>
     </div>
-  </div>         
+  </div>
 
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

diff --git a/theme/imghost/index.html b/theme/imghost/index.html
@@ -12,18 +12,18 @@
 </head>
 <body>
 
-  <div class="card shadow m-3"> 
-    <h5 class="card-header">图片转为base64编码</h5> 
-    <div class="card-body"> 
-      <h5 class="card-title"></h5> 
+  <div class="card shadow m-3">
+    <h5 class="card-header">图片转为base64编码</h5>
+    <div class="card-body">
+      <h5 class="card-title"></h5>
 
       <div class="mb-3">
         <label for="input_file" class="form-label">选择文件</label>
         <input class="form-control" type="file" id="input_file" onchange="onFileChange(this)">
       </div>
 
-      <div class="mb-3" style="max-height: 360px; max-width: 360px;" id="img_input">
-        <img src="">
+      <div class="mb-3">
+        <img id="img_input" src="" style="max-width: 100%; max-height: 1024px;">
       </div>
 
       <div class="form-floating mb-3">
@@ -34,10 +34,10 @@ <h5 class="card-title"></h5>
       <div>
         <button class="btn btn-info" type="button" onclick='syncKeyValue()'>Next</button>
       </div>
-    </div> 
-    <div class="card-footer"> 
-    </div> 
-  </div> 
+    </div>
+    <div class="card-footer">
+    </div>
+  </div>
 
   <div class="card shadow m-3">
     <h5 class="card-header">短链系统变身图床Imgage Hosting</h5>
@@ -53,7 +53,7 @@ <h5 class="card-title"> </h5>
       <div class="input-group mb-3">
         <span class="input-group-text" id="basic-addon2">文件名</span>
         <input type="text" class="form-control" id="keyPhrase" aria-describedby="basic-addon2" placeholder="">
-      </div>     
+      </div>
 
       <div class="input-group mb-3">
         <button class="btn btn-primary" type="button" onclick='shorturl()' id="addBtn">保存</button>
@@ -74,7 +74,7 @@ <h5 class="card-title"> </h5>
       </div>
 
       <div class="card-text">
-        <div classs="list-group" id="urlList"> 
+        <div classs="list-group" id="urlList">
           <div class="list-group-item">
             <button type="button" class="btn btn-danger" onclick='deleteShortUrl("4rEbzm")'>X</button>
             <button type="button" class="btn btn-info" onclick='queryVisitCount("4rEbzm")'>?</button>
@@ -123,22 +123,22 @@ <h5 class="modal-title" id="resultModalLabel">Result</h5>
       if (!base64.startsWith('data:image')) {
         base64 = 'data:image/jpeg;base64,' + base64
       }
-      img_input.innerHTML = `<img src="${base64}">`;
+      img_input.src = base64;
     }
 
     function onFileChange(e) {
       loadImage(e.files[0]);
-      // e.value = null;
     }
 
     function syncKeyValue() {
       document.getElementById('keyPhrase').value = document.getElementById('input_file').files[0].name;
       document.getElementById('longURL').value = document.getElementById('area_base64').value;
     }
+
     function loadImage(file) {
       let reader = new FileReader();
       reader.onload = function (e) {
-        img_input.innerHTML = `<img src="${e.target.result}">`;
+        img_input.src = e.target.result;
         area_base64.value = e.target.result;
       };
       reader.readAsDataURL(file);
@@ -162,7 +162,7 @@ <h5 class="modal-title" id="resultModalLabel">Result</h5>
 
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
-    
+
   <script src="https://crazypeace.github.io/Url-Shorten-Worker/main.js" crossorigin="anonymous"></script>
   <!--
     <script src="https://cdn.jsdelivr.net/gh/crazypeace/Url-Shorten-Worker/main.js" crossorigin="anonymous"></script>