From 61d989f7798c0d5ed7cdb9bf962c7dad1de139d5 Mon Sep 17 00:00:00 2001
From: = <=>
Date: Fri, 31 May 2024 15:30:45 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20typed=20Array=E7=9A=84=E5=BA=94?=
 =?UTF-8?q?=E7=94=A8=E5=9B=BE=E5=83=8F=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 html/图像灰度处理.html | 75 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 75 insertions(+)
 create mode 100644 html/图像灰度处理.html
diff --git a/html/图像灰度处理.html b/html/图像灰度处理.html
new file mode 100644
index 0000000..ff6d27f
--- /dev/null
+++ 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>
