plter
diff --git a/‎.gitignore
Lines changed: 1 addition & 0 deletions b/‎.gitignore
Lines changed: 1 addition & 0 deletions
diff --git a/‎Colors/index.html
Lines changed: 10 additions & 0 deletions b/‎Colors/index.html
Lines changed: 10 additions & 0 deletions
diff --git a/‎LoadPhoto/app.js
Lines changed: 9 additions & 0 deletions b/‎LoadPhoto/app.js
Lines changed: 9 additions & 0 deletions
diff --git a/‎LoadPhoto/dog.jpg
7.78 KB b/‎LoadPhoto/dog.jpg
7.78 KB
diff --git a/‎LoadPhoto/index.html
Lines changed: 12 additions & 0 deletions b/‎LoadPhoto/index.html
Lines changed: 12 additions & 0 deletions
diff --git a/‎PhotoData/app.js
Lines changed: 46 additions & 0 deletions b/‎PhotoData/app.js
Lines changed: 46 additions & 0 deletions
diff --git a/‎PhotoData/dog.jpg
7.78 KB b/‎PhotoData/dog.jpg
7.78 KB
diff --git a/‎PhotoData/index.html
Lines changed: 14 additions & 0 deletions b/‎PhotoData/index.html
Lines changed: 14 additions & 0 deletions
diff --git a/‎机器学习之手写识别.pptx
147 KB b/‎机器学习之手写识别.pptx
147 KB
diff --git a/‎资源/dog.jpg
7.78 KB b/‎资源/dog.jpg
7.78 KB
@@ -1,2 +1,3 @@
 .idea
 *.iml
+.DS_Store
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+</head>
+<body style="background-color: blue;">
+<div style="background-color: rgba(255,0,0,0.7);width: 100px;height: 100px;"></div>
+</body>
+</html>
@@ -0,0 +1,9 @@
+(function () {
+
+    let img = new Image();
+    img.onload = e => {
+        document.body.appendChild(img);
+    };
+    img.src = "dog.jpg";
+
+})();
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+</head>
+<body>
+<!--<img src="dog.jpg">-->
+
+<script src="app.js"></script>
+</body>
+</html>
@@ -0,0 +1,46 @@
+(function () {
+
+    let canvas = document.querySelector("canvas");
+
+    function loadImage(src) {
+        return new Promise((resolve, reject) => {
+            let img = new Image();
+            img.onload = () => {
+                resolve(img);
+            };
+            img.onerror = reject;
+            img.src = src;
+        });
+    }
+
+    async function main() {
+        let img = await loadImage("dog.jpg");
+
+        //draw image
+        /**
+         * @type {CanvasRenderingContext2D | null}
+         */
+        let context2d = canvas.getContext("2d");
+        context2d.drawImage(img, 0, 0);
+
+        let imageData = context2d.getImageData(0, 0, 200, 200);
+        // console.log(imageData.data.length);
+        console.log(imageData.data);
+
+        let rImageData = context2d.createImageData(200, 200);
+        for (let i = 0; i < imageData.data.length; i += 4) {
+            let r = imageData.data[i];
+            let g = imageData.data[i + 1];
+            let b = imageData.data[i + 2];
+            let value = Math.round((r + g + b) / 3);
+            rImageData.data[i] = value;
+            rImageData.data[i + 1] = value;
+            rImageData.data[i + 2] = value;
+            rImageData.data[i + 3] = 255;
+        }
+
+        context2d.putImageData(rImageData, 200, 0);
+    }
+
+    main();
+})();
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+</head>
+<body>
+
+<canvas width="400" height="400" style="border-style: solid;"></canvas>
+
+
+<script src="app.js"></script>
+</body>
+</html>