add image contours

2015-03-02 07:53:44 +08:00 · 2015-03-02 07:53:44 +08:00 · 710b7f590e
commit 710b7f590e
parent 6cc50958c3
7 changed files with 223 additions and 0 deletions
--- a/demo/canvasImage.html
+++ b/demo/canvasImage.html
@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>canvas读取图片</title>
+    <script src="../dep/esl.js"></script>
+    <script src="../dep/jquery.min.js"></script>
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+        }
+
+    </style>
+</head>
+<body>
+    <canvas id="canvas" width="800" height="800"></canvas>
+<script>
+    require.config({
+        baseUrl: '../src',
+        paths: {
+            demo: '../demo/js',
+        }
+    });
+    define('jquery', $);
+</script>
+
+<script>require(['demo/canvasImage'])</script>
+</body>
+</html>
--- a/demo/js/canvasImage.js
+++ b/demo/js/canvasImage.js
@ -0,0 +1,60 @@
+/**
+ * @file canvas读取图片
+ * @author mengke01(kekee000@gmail.com)
+ */
+
+define(
+    function (require) {
+
+        var image2Values = require('graphics/image/image2Values');
+        var findContours = require('graphics/image/findContours');
+
+        var entry = {
+
+            /**
+             * 初始化
+             */
+            init: function () {
+
+                var context =document.getElementById("canvas").getContext("2d");
+                var cvsH = context.height;
+                var cvsW = context.width;
+
+                var img = new Image();
+                img.src = "../test/add.gif";
+                var width;
+                var height;
+                img.onload = function (){
+                    width = img.width;
+                    height = img.height;
+                    context.drawImage(img, 0, 0);
+                    var imgData = context.getImageData(0, 0, width, height);
+                    var result = image2Values(imgData);
+                    //var pointArray = findContours(result);
+
+                    context.clearRect(0, 0, width, height);
+                    var putData = imgData.data;
+                    var data = result.data;
+                    for (var y = 0; y < height; y ++) {
+                        for (var x = 0; x < width; x++) {
+                            var offset = y * height + x;
+                            if (data[offset]) {
+                                putData[offset * 4] = 255;
+                                putData[offset * 4 + 1] = 255;
+                                putData[offset * 4 + 2] = 0;
+                                putData[offset * 4 + 3] = 255;
+                            }
+                        }
+                    }
+                    context.putImageData(imgData, 0, 0);
+
+                    console.log(result.length);
+                };
+            }
+        };
+
+        entry.init();
+
+        return entry;
+    }
+);
--- a/src/graphics/image/findContours.js
+++ b/src/graphics/image/findContours.js
@ -0,0 +1,70 @@
+/**
+ * @file 查找二值图像轮廓
+ * @author mengke01(kekee000@gmail.com)
+ */
+
+
+define(
+    function (require) {
+        /**
+         * 查找二值图像轮廓
+         *
+         * @param {Object} imageData 图像二值数据
+         * @return {Array} 轮廓点集合
+         */
+        function findContours(imageData) {
+            var data = imageData.data;
+            var width = imageData.width;
+            var height = imageData.height;
+            var x;
+            var y;
+            var line;
+            var isInContour = false;
+            var curLineArray = [];
+            var prevLineArray = []; // 记录Y轴有轮廓的起始坐标
+            var startPointArray = []; // 记录起始节点
+            var point;
+
+            // 查找轮廓坐标
+            for (y = 0; y < height; y ++) {
+                line = y * width;
+                isInContour = false;
+                curLineArray = [];
+                for (x = 0; x < width; x++) {
+                    if (!isInContour && data[line + x]) {
+                        if (!point  || (point.x !== x - 1)) {
+                            isInContour = true;
+                            point = {
+                                x: x,
+                                y: y,
+                                isIn: true
+                            };
+                            curLineArray.push(point);
+                        }
+                    }
+                    else if (isInContour && !data[line + x]) {
+                        if (!point  || (point.x !== x - 1)) {
+                            isInContour = false;
+                            point = {
+                                x: x,
+                                y: y,
+                                isIn: false
+                            };
+                            curLineArray.push(point);
+                        }
+                    }
+
+                    prevLineArray = curLineArray;
+
+
+                }
+
+            }
+
+
+            return pointArray;
+        }
+
+        return findContours;
+    }
+);
--- a/src/graphics/image/image2Values.js
+++ b/src/graphics/image/image2Values.js
@ -0,0 +1,63 @@
+/**
+ * @file 对图像进行二值化
+ * @author mengke01(kekee000@gmail.com)
+ */
+
+
+define(
+    function (require) {
+        /**
+         * 对图像进行二值化
+         *
+         * @param {Object} imageData 原始图像数据，rgba序列
+         * @param {Array} imageData.data 数据数组
+         * @param {number} imageData.width 宽度
+         * @param {number} imageData.height 高度
+         *
+         * @param {number} threshold 截止阈值， 0~255
+         * @param {number} thresholdAlpha 截止alpha通道值0~255
+         */
+        function image2values(imageData, threshold, thresholdAlpha) {
+
+            threshold = threshold == null ? 200 : threshold;
+            thresholdAlpha = thresholdAlpha == null ? 50 : thresholdAlpha;
+
+            var width = imageData.width;
+            var height = imageData.height;
+            var data = imageData.data;
+            var line;
+            var offset;
+            var newData = [];
+
+            for (var y = 0; y < height; y ++) {
+                line = y * width;
+                for (var x = 0; x < width; x++) {
+
+                    offset = (line + x) * 4;
+                    if (data[offset + 3] < thresholdAlpha) {
+                        newData[line + x] = 0;
+                    }
+                    else {
+                        if (
+                            ((data[offset + 2] * 29 + data[offset + 1] * 150 + data[offset] * 77 + 128) >> 8)
+                            < threshold
+                        ){
+                            newData[line + x] = 1;
+                        }
+                        else {
+                            newData[line + x] = 0;
+                        }
+                    }
+                }
+            }
+
+            return {
+                width: width,
+                height: height,
+                data: newData
+            };
+        }
+
+        return image2values;
+    }
+);
--- a/test/add.gif
+++ b/test/add.gif
--- a/test/add.jpg
+++ b/test/add.jpg
--- a/test/question.png
+++ b/test/question.png