图片处理知识讲解

plter · Mar 12, 2018 · f4439f1 · f4439f1
1 parent a4f7d5c
commit f4439f1
Show file tree

Hide file tree

Showing 10 changed files with 92 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,3 @@
 .idea
 *.iml
+.DS_Store
diff --git a/Colors/index.html b/Colors/index.html
@@ -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>
diff --git a/LoadPhoto/app.js b/LoadPhoto/app.js
@@ -0,0 +1,9 @@
+(function () {
+
+    let img = new Image();
+    img.onload = e => {
+        document.body.appendChild(img);
+    };
+    img.src = "dog.jpg";
+
+})();
diff --git a/LoadPhoto/dog.jpg b/LoadPhoto/dog.jpg
diff --git a/LoadPhoto/index.html b/LoadPhoto/index.html
@@ -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>
diff --git a/PhotoData/app.js b/PhotoData/app.js
@@ -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();
+})();
diff --git a/PhotoData/dog.jpg b/PhotoData/dog.jpg
diff --git a/PhotoData/index.html b/PhotoData/index.html
@@ -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>
diff --git a/机器学习之手写识别.pptx b/机器学习之手写识别.pptx
diff --git a/资源/dog.jpg b/资源/dog.jpg