fix

farrwang · Nov 7, 2017 · 252c3d8 · 252c3d8
1 parent 2196ea7
commit 252c3d8
Show file tree

Hide file tree

Showing 6 changed files with 138 additions and 14 deletions.
diff --git a/canvasFilter/index.js b/canvasFilter/index.js
@@ -61,17 +61,17 @@ function ashing(originColorData, outputData, ws, hs) {
   let index;
   let r, g, b;
   // 按行扫描
-  for (let y = 1; y < hs - 1; y++) {
+  for (let y = 1; y <= hs; y++) {
     // 按列扫描
-    for (let x = 1; x < ws - 1; x++) {
+    for (let x = 1; x <= ws; x++) {
       // rgb处理
       index = (y * ws + x) * 4
       let avg = 0.2126 * originColorData[index] + 0.7152 * originColorData[index + 1] + 0.0722 * originColorData[index + 2];
       outputData[index] = avg
       outputData[index + 1] = avg
       outputData[index + 2] = avg
       // alpha
-      outputData[(y*ws + x)*4 + 3] = 255;
+      outputData[index + 3] = 255;
     }
   }
 }
@@ -81,9 +81,9 @@ function retro(originColorData, outputData, ws, hs) {
   let index;
   let r, g, b;
   // 按行扫描
-  for (let y = 1; y < hs - 1; y++) {
+  for (let y = 1; y <= hs; y++) {
     // 按列扫描
-    for (let x = 1; x < ws - 1; x++) {
+    for (let x = 1; x <= ws; x++) {
       // rgb处理
       index = (y * ws + x) * 4
       r = originColorData[index]
@@ -96,7 +96,7 @@ function retro(originColorData, outputData, ws, hs) {
       // b
       outputData[index + 2] = (r * 0.272) + (g * 0.534) + (b * 0.131)
       // alpha
-      outputData[(y*ws + x)*4 + 3] = 255;
+      outputData[index + 3] = 255;
     }
   }
 }
@@ -108,18 +108,18 @@ function weird(originColorData, outputData, ws, hs) {
   let index;
   let r, g, b;
   // 按行扫描
-  for (let y = 1; y < hs - 1; y++) {
+  for (let y = 1; y <= hs; y++) {
     // 按列扫描
-    for (let x = 1; x < ws - 1; x++) {
+    for (let x = 1; x <= ws; x++) {
       // rgb处理
       for (let c = 0; c < 3; c++) {
         random = Math.random(0, 255) * 100
         randomData = Math.abs(random - originColorData[index])
-        index = (y * ws + x) * 4 + c
+        index = ((y - 1) * ws + (x - 1)) * 4 + c
         outputData[index] = randomData
       }
       // alpha
-      outputData[(y*ws + x)*4 + 3] = 255;
+      outputData[index + 3] = 255;
     }
   }
 }
@@ -129,16 +129,16 @@ function photographicPlate(originColorData, outputData, ws, hs) {
   let index;
   let r, g, b;
   // 按行扫描
-  for (let y = 1; y < hs - 1; y++) {
+  for (let y = 1; y <= hs; y++) {
     // 按列扫描
-    for (let x = 1; x < ws - 1; x++) {
+    for (let x = 1; x <= ws; x++) {
       // rgb处理
       for (let c = 0; c < 3; c++) {
-        index = (y * ws + x) * 4 + c
+        index = ((y - 1) * ws + (x - 1)) * 4 + c
         outputData[index] = Math.abs(255 - originColorData[index])
       }
       // alpha
-      outputData[(y*ws + x)*4 + 3] = 255;
+      outputData[index + 3] = 255;
     }
   }
 }

diff --git a/canvasParticle/README.md b/canvasParticle/README.md
@@ -0,0 +1,5 @@
+运行
+---
+因为canvas的getImageData会涉及跨域，所以，需要在本地启动一个服务器。
+最方便的就是php起一个服务。
+在命令行进入该文件夹目录，然后使用 `php -S 127.0.0.1:8888`就能启动服务，最后在游览器输入127.0.0.1:8888就能看到效果了。
diff --git a/canvasParticle/index.css b/canvasParticle/index.css
@@ -0,0 +1,47 @@
+.box {
+  float: left;
+  width: 400px;
+}
+.box img {
+  width: 100%;
+}
+
+canvas {
+  float: left;
+  width: 400px;
+}
+
+h3 {
+  margin-bottom: 0;
+  padding: 0;
+}
+
+.selection {
+  padding: 0;
+  margin-bottom: 20px;
+  margin-top: 0;
+}
+
+.selection:after {
+  display: table;
+  content: '';
+  height: 0;
+  visibility: hidden;
+  clear: both;
+}
+.selection li {
+  float: left;
+  font-size: 16px;
+  list-style: none;
+}
+.selection li button {
+  outline: none;
+  border: none;
+  box-shadow: none;
+  padding: 5px 40px;
+  font-size: 16px;
+  background-color: #333;
+  color: #fff;
+  margin-right: 20px;
+  cursor: pointer;
+}
diff --git a/canvasParticle/index.html b/canvasParticle/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>canvas 滤镜</title>
+  <link rel="stylesheet" href="index.css">
+</head>
+<body>
+  <h3>
+    滤镜选择：
+  </h3>
+  <ul class="selection">
+    <li>
+      <button id="particle">粒子</button>
+    </li>
+  </ul>
+  <div class="box">
+    <img id="img" src="index.png">
+  </div>
+  <canvas id="canvas"></canvas>
+  <script src="index.js"></script>
+</body>
+</html>
diff --git a/canvasParticle/index.js b/canvasParticle/index.js
@@ -0,0 +1,47 @@
+draw()
+
+function draw() {
+  const canvas = document.getElementById('canvas')
+  const ctx = canvas.getContext('2d')
+  const img = document.getElementById('img')
+  img.onload = function() {
+    const style = window.getComputedStyle(img)
+    const w = style.width
+    const h = style.height
+    const ws = w.replace(/px/, '')
+    const hs = h.replace(/px/, '')
+    canvas.width = ws
+    canvas.height = hs
+    ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
+    // 替换颜色
+    const originColor = ctx.getImageData(0, 0, ws, hs)
+    const originColorData = originColor.data
+    const output = ctx.createImageData(ws, hs)
+    const outputData = output.data
+    // 灰化按钮绑定
+    const particleBtn = document.getElementById('particle')
+    particleBtn.addEventListener('click', function() {
+      particle(originColorData, outputData, ws, hs)
+      ctx.putImageData(output, 0, 0)
+    })
+  }
+}
+
+// 粒子化
+function particle(originColorData, outputData, ws, hs) {
+  let index;
+  let r, g, b;
+  // 按行扫描
+  for (let y = 1; y <= hs; y++) {
+    // 按列扫描
+    for (let x = 1; x <= ws; x++) {
+      // rgb处理
+      index = ((y - 1) * ws + (x - 1)) * 4
+      outputData[index] = originColorData[index]
+      outputData[index + 1] = originColorData[index + 1]
+      outputData[index + 2] = originColorData[index + 2]
+      // alpha
+      outputData[index + 3] = 255;
+    }
+  }
+}
diff --git a/canvasParticle/index.png b/canvasParticle/index.png