test

8 years ago · bdc2a2cd80
parent d4de51ccdf
commit bdc2a2cd80
1 changed files with 68 additions and 0 deletions
--- a/ImgData.html
+++ b/ImgData.html
@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="UTF-8">
+    <title>imgdata</title>
+</head>
+<style>
+    #toggle,
+    #bw {
+        display: none;
+    }
+</style>
+
+<body>
+    <input type="file" accept="image/*">
+    <p><img src=""></p>
+    <p><input type="button" value="取反" id="toggle">
+        <input type="button" value="黑白" id="bw"></p>
+    <canvas width="300" height="300">your browser do not support canvas</canvas>
+    <script>
+        var fileIm = document.querySelector('input[type=file]');
+        var iimg = document.querySelector('img');
+        var tog = document.querySelector('#toggle');
+        var bw = document.querySelector('#bw');
+        var oC = document.querySelector('canvas');
+        var oCg = oC.getContext('2d');
+        reader = new FileReader();
+        fileIm.addEventListener('change', function(event) {
+            file = event.target.files[0];
+            reader.readAsDataURL(file);
+        });
+        reader.onload = function(e) {
+            iimg.src = e.target.result;
+            tog.style.cssText = 'display:inline-block';
+            bw.style.cssText = 'display:inline-block';
+        };
+        toggle.addEventListener('click', function() {
+            oCg.drawImage(iimg, 0, 0);
+            var imgData = oCg.getImageData(0, 0, iimg.width, iimg.height);
+            data = imgData.data;
+            for (var i = 0; i < data.length; i += 4) {
+                //反色:把每一个像素点的rgb取反
+                data[i] = 255 - data[i];
+                data[i + 1] = 255 - data[i + 1];
+                data[i + 2] = 255 - data[i + 2];
+            }
+            //处理之后再次输出
+            oCg.putImageData(imgData, 0, 0);
+        })
+        bw.addEventListener('click', function() {
+            oCg.drawImage(iimg, 0, 0);
+            var imgData = oCg.getImageData(0, 0, iimg.width, iimg.height);
+            data = imgData.data;
+            for (var i = 0; i < data.length; i += 4) {
+                //黑白效果:rgb的平均值,赋值给rgb
+                avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
+                data[i] = avg;
+                data[i + 1] = avg;
+                data[i + 2] = avg;
+            }
+            //处理之后再次输出
+            oCg.putImageData(imgData, 0, 0);
+        })
+    </script>
+</body>
+
+</html>