feat: typed Array的应用图像处理

2024-05-31 15:30:45 +08:00 · 2024-05-31 15:30:45 +08:00 · 61d989f779
commit 61d989f779
parent 59de005538
1 changed files with 75 additions and 0 deletions
--- a/html/图像灰度处理.html
+++ b/html/图像灰度处理.html
@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Image Processing Demo</title>
+</head>
+<body>
+  <input type="file" id="fileInput" accept="image/*">
+  <canvas id="canvas" style="display: none;"></canvas>
+  <img width="500px" height="500px" id="image" src="" alt="Image" style="max-width: 100%;">
+  <button id="grayscaleBtn">灰度</button>
+  <button id="invertBtn">颜色反转</button>
+
+  <script>
+    const fileInput = document.getElementById('fileInput');
+    const canvas = document.getElementById('canvas');
+    const ctx = canvas.getContext('2d');
+    const imageElement = document.getElementById('image');
+    const grayscaleBtn = document.getElementById('grayscaleBtn');
+    const invertBtn = document.getElementById('invertBtn');
+    let imageData;
+
+    fileInput.addEventListener('change', function(e) {
+      const file = e.target.files[0];
+      const reader = new FileReader();
+      reader.onload = function(event) {
+        const img = new Image();
+        img.onload = function() {
+          canvas.width = img.width;
+          canvas.height = img.height;
+          ctx.drawImage(img, 0, 0);
+          imageData = ctx.getImageData(0, 0, img.width, img.height);
+          imageElement.src = canvas.toDataURL();
+        };
+        img.src = event.target.result;
+      };
+      reader.readAsDataURL(file);
+    });
+
+    grayscaleBtn.addEventListener('click', function() {
+      if (imageData) {
+        grayscale(imageData.data);
+        ctx.putImageData(imageData, 0, 0);
+        imageElement.src = canvas.toDataURL();
+      }
+    });
+
+    invertBtn.addEventListener('click', function() {
+      if (imageData) {
+        invertColors(imageData.data);
+        ctx.putImageData(imageData, 0, 0);
+        imageElement.src = canvas.toDataURL();
+      }
+    });
+
+    function grayscale(data) {
+      for (let i = 0; i < data.length; i += 4) {
+        const brightness = (data[i] + data[i + 1] + data[i + 2]) / 3;
+        data[i] = brightness;
+        data[i + 1] = brightness;
+        data[i + 2] = brightness;
+      }
+    }
+
+    function invertColors(data) {
+      for (let i = 0; i < data.length; i += 4) {
+        data[i] = 255 - data[i]; // 反转红色通道
+        data[i + 1] = 255 - data[i + 1]; // 反转绿色通道
+        data[i + 2] = 255 - data[i + 2]; // 反转蓝色通道
+      }
+    }
+  </script>
+</body>
+</html>