Home Explore Help
Sign In
tianyunperfect
/
web-base--
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

2023-05-09.10:48:08

tianyun 2 years ago
parent
f0e399352f
commit
98eceaf509
4 changed files with 81 additions and 13 deletions
Unified View Show Diff Stats
  1. BIN
      .DS_Store
  2. 0 0
      push.sh
  3. 65 0
      simple-demo/webp.html
  4. 16 13
      tmp/tmp.js

BIN
.DS_Store
View File


+ 0 - 0
tmp/push.sh → push.sh
View File


+ 65 - 0
simple-demo/webp.html
View File 

@@ -0,0 +1,65 @@
 
+<!DOCTYPE html>
 
+<html>
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <title>webp</title>
 
+    <style>
 
+        #image-display {
 
+            max-width: 100%;
 
+            max-height: 100%;
 
+            border: 1px solid gray;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+<h1>粘贴图片并展示</h1>
 
+<p>右键粘贴图片，本地图片或网络图片地址都可以，将被压缩为webp格式并展示</p>
 
+<div id="image-container">
 
+    <img id="image-display" src="" alt="Image Display">
 
+</div>
 
+<script>
 
+    const imageDisplay = document.getElementById("image-display");
 
+
 
+    // 监听粘贴事件
 
+    document.addEventListener("paste", (event) => {
 
+        // 获取粘贴板数据
 
+        const items = event.clipboardData.items;
 
+        if (!items) {
 
+            return;
 
+        }
 
+
 
+        // 查找图片数据
 
+        for (let i = 0; i < items.length; i++) {
 
+            if (items[i].type.indexOf("image") !== -1) {
 
+                // 获取图片文件或URL
 
+                const blob = items[i].getAsFile();
 
+                const imageUrl = URL.createObjectURL(blob);
 
+
 
+                // 将图片展示
 
+                imageDisplay.src = imageUrl;
 
+
 
+                // 压缩为webp格式
 
+                const image = new Image();
 
+                image.onload = () => {
 
+                    const canvas = document.createElement("canvas");
 
+                    canvas.width = image.naturalWidth;
 
+                    canvas.height = image.naturalHeight;
 
+                    const context = canvas.getContext("2d");
 
+                    context.drawImage(image, 0, 0);
 
+                    canvas.toBlob((webpBlob) => {
 
+                        // 将压缩后的webp图片展示在页面上
 
+                        const webpUrl = URL.createObjectURL(webpBlob);
 
+                        imageDisplay.src = webpUrl;
 
+
 
+                    }, "image/webp", 0.8);
 
+                };
 
+                image.src = imageUrl;
 
+
 
+                // 防止页面跳转
 
+                event.preventDefault();
 
+            }
 
+        }
 
+    });
 
+</script>
 
+</body>
 
+</html>

+ 16 - 13
tmp/tmp.js
View File 

@@ -1,15 +1,18 @@
 
-let str = "Only one message at a time. Please allow any other responses to complete before sending another message, or wait one minute.";
 
-
 
-function contains(selector, text) {
 
-    const elements = document.querySelectorAll(selector);
 
-    return Array.prototype.filter.call(elements, function (element) {
 
-        return RegExp(text).test(element.textContent);
 
-    });
 
+function urlToBase64(url, callback) {
 
+    var xhr = new XMLHttpRequest();
 
+    xhr.onload = function() {
 
+        var reader = new FileReader();
 
+        reader.onloadend = function() {
 
+            callback(reader.result);
 
+        }
 
+        reader.readAsDataURL(xhr.response);
 
+    };
 
+    xhr.open('GET', url);
 
+    xhr.responseType = 'blob';
 
+    xhr.send();
 
 }
 
 }
 
+var imageUrl = 'https://static.flomoapp.com/file/2023-04-02/19208/1680445554566B00B7ACEC5BE07B8.jpg?OSSAccessKeyId=LTAI4G9PcaGksWVKCPrE1TVL&Expires=1680763399&Signature=Fwxz3MC%2FfECIuyddsuQzC81MmRs%3D';
 
 
 
-setInterval(() => {
 
-    if (document.body.innerText.indexOf(str) > 0) {
 
-        contains("button", "Regenerate")[0].click();
 
-    }
 
-}, 2000);
 
-
 
+urlToBase64(imageUrl, function(base64) {
 
+    console.log(base64); // 输出转换后的 Base64 编码
 
+});