From b65168ee07cffd42b14dc3832e1c8328a9e38636 Mon Sep 17 00:00:00 2001 From: kekee000 Date: Sat, 28 Mar 2015 01:25:42 +0800 Subject: [PATCH] add image import --- README.md | 4 +- TODO.md | 3 +- css/common/editor.less | 1 + css/common/import-pic.less | 20 + css/main.less | 3 +- demo/canvasFindBreakPoint.html | 11 +- demo/canvasImage.html | 43 -- demo/css/editor.css | 4 + demo/js/canvasFindBreakPoint.js | 55 +- demo/js/canvasFindBreakPoint1.js | 565 -------------------- demo/js/canvasImage.js | 116 ---- demo/js/fitImage.js | 31 +- edp-build-config-node.js | 3 +- index.html | 1 + src/fonteditor/controller/actions.js | 11 + src/fonteditor/dialog/setting-import-pic.js | 236 ++++++++ src/fonteditor/dialog/support.js | 3 +- src/fonteditor/widget/glyfeditor.js | 2 +- src/graphics/image/findContours.js | 13 + src/graphics/image/grayImage.js | 12 +- src/graphics/image/image2Values.js | 9 +- src/graphics/image/imageFilter.js | 91 ++++ 22 files changed, 475 insertions(+), 762 deletions(-) create mode 100644 css/common/import-pic.less delete mode 100644 demo/canvasImage.html delete mode 100644 demo/js/canvasFindBreakPoint1.js delete mode 100644 demo/js/canvasImage.js create mode 100644 src/fonteditor/dialog/setting-import-pic.js create mode 100644 src/graphics/image/imageFilter.js diff --git a/README.md b/README.md index fc272ad..430dcc8 100644 --- a/README.md +++ b/README.md @@ -33,5 +33,7 @@ fonteditor 在线ttf字体编辑器 13. 2015-2-5 添加轮廓支持拖拽曲线，支持`ctrl+Z`回退. - 14. 2015-3-12 修复路径合并，修复路径split，修复项目管理. + +15. 2015-3-12 增加字形图像导入功能. + diff --git a/TODO.md b/TODO.md index 7ce5d8b..9e33014 100644 --- a/TODO.md +++ b/TODO.md @@ -4,4 +4,5 @@ 3. 路径的交、并、差集在特殊情况下会buzz -4. 路径切割没有考虑多路径的情况 \ No newline at end of file + +4. 图片导入只能导入轮廓鲜明的图像，图像拟合效果不好 diff --git a/css/common/editor.less b/css/common/editor.less index e86d3a2..3e13650 100644 --- a/css/common/editor.less +++ b/css/common/editor.less @@ -9,6 +9,7 @@ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; + display: none; .marker-x, .marker-y { diff --git a/css/common/import-pic.less b/css/common/import-pic.less new file mode 100644 index 0000000..e97a39c --- /dev/null +++ b/css/common/import-pic.less @@ -0,0 +1,20 @@ + + +.import-pic-panel { + height: 400px; + overflow: auto; + background: #FFF; + margin-bottom: 15px; + overflow: auto; + + .fitpanel { + max-width: 98%; + max-height: 98%; + } +} + +.import-pic-fitpanel { + float: right; +} + + diff --git a/css/main.less b/css/main.less index 86de50b..c761c12 100644 --- a/css/main.less +++ b/css/main.less @@ -3,4 +3,5 @@ @import './common/ico.less'; @import './common/project.less'; @import './common/glyf-list.less'; -@import './common/editor.less'; \ No newline at end of file +@import './common/editor.less'; +@import './common/import-pic.less'; diff --git a/demo/canvasFindBreakPoint.html b/demo/canvasFindBreakPoint.html index 20efe8a..b152440 100644 --- a/demo/canvasFindBreakPoint.html +++ b/demo/canvasFindBreakPoint.html @@ -17,7 +17,16 @@
灰度阈值： - alpha阈值： + 反转图像： + 二值算子： +
- - - - -
- - 灰度阈值： - 二值算子： - -
- - - - - - diff --git a/demo/css/editor.css b/demo/css/editor.css index 604228b..4a0d7df 100644 --- a/demo/css/editor.css +++ b/demo/css/editor.css @@ -56,6 +56,9 @@ a:hover { .i-github:before { content: '\e01e'; } +.i-help:before { + content: '\e016'; +} .i-new:before { content: '\e019'; } @@ -156,6 +159,7 @@ a:hover { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; + display: none; } .glyf-editor .marker-x, .glyf-editor .marker-y { diff --git a/demo/js/canvasFindBreakPoint.js b/demo/js/canvasFindBreakPoint.js index e01b196..2cdd411 100644 --- a/demo/js/canvasFindBreakPoint.js +++ b/demo/js/canvasFindBreakPoint.js @@ -16,10 +16,13 @@ define( var ctx = null; var canvas = null; var curImage = null; - var thresholdGray = null; - var thresholdAlpha = null; - + function getOptions() { + return { + threshold: $('#threshold-fn').val() ? $('#threshold-fn').val() : +$('#threshold-gray').val(), + reverse: !!$('#threshold-reverse').get(0).checked + } + } function onUpFileChange(e) { var file = e.target.files[0]; @@ -28,7 +31,7 @@ define( var image = curImage = new Image(); image.onload = function () { - getContours(image, +thresholdGray.value, +thresholdAlpha.value); + getContours(image); }; image.src = e.target.result; @@ -41,24 +44,31 @@ define( reader.readAsDataURL(file); } - function getContours(image, gray, alpha) { + function getContours(image) { ctx.clearRect(0,0, canvas.width, canvas.height); var width = image.width; var height = image.height; canvas.width = image.width; canvas.height = image.height; + ctx.drawImage(image, 0, 0, width, height); var imgData = ctx.getImageData(0, 0, width, height); - var result = image2Values(imgData, gray, alpha); + var result = image2Values(imgData, getOptions()); - var putData = new Uint8ClampedArray(imgData.data.buffer); + var putData = imgData.data; for (var y = 0; y < height; y ++) { var line = width * y; for (var x = 0; x < width; x++) { var offset = line + x; if (result.data[offset]) { - putData[offset * 4] = 240; - putData[offset * 4 + 1] = 248; + putData[offset * 4] = 208; + putData[offset * 4 + 1] = 247; + putData[offset * 4 + 2] = 113; + putData[offset * 4 + 3] = 255; + } + else { + putData[offset * 4] = 255; + putData[offset * 4 + 1] = 255; putData[offset * 4 + 2] = 255; putData[offset * 4 + 3] = 255; } @@ -70,9 +80,9 @@ define( contours.forEach(function (contour) { contour.forEach(function (p) { var offset = p.y * width + p.x; - putData[offset * 4] = 2; - putData[offset * 4 + 1] = 242; - putData[offset * 4 + 2] = 32; + putData[offset * 4] = 255; + putData[offset * 4 + 1] = 0; + putData[offset * 4 + 2] = 0; putData[offset * 4 + 3] = 255; }); }); @@ -111,12 +121,14 @@ define( ctx.fillStyle = 'blue'; } - ctx.fillRect(p.x, p.y, p.right == 1 ? 4 : 2, p.right == 1 ? 4 : 2); + ctx.fillRect(p.x, p.y, p.right == 1 ? 6 : 3, p.right == 1 ? 6 : 3); }); } - + function refresh() { + curImage && getContours(curImage, getOptions()); + } var entry = { @@ -128,16 +140,19 @@ define( document.getElementById('upload-file').addEventListener('change', onUpFileChange); canvas = document.getElementById("canvas"); ctx = canvas.getContext("2d"); - thresholdGray = document.getElementById('threshold-gray'); - thresholdAlpha = document.getElementById('threshold-alpha'); - thresholdGray.onchange = thresholdAlpha.onchange = function () { - curImage && getContours(curImage, +thresholdGray.value, +thresholdAlpha.value); - } + $('#threshold-gray').on('change', function () { + $('#threshold-fn').val(''); + refresh(); + }); + + $('#threshold-fn').on('change', refresh); + $('#threshold-reverse').on('change', refresh); var img = new Image(); img.onload = function () { - getContours(curImage = img, +thresholdGray.value, +thresholdAlpha.value); + curImage = img; + refresh(); } img.src = '../test/meng1.gif'; } diff --git a/demo/js/canvasFindBreakPoint1.js b/demo/js/canvasFindBreakPoint1.js deleted file mode 100644 index 1562992..0000000 --- a/demo/js/canvasFindBreakPoint1.js +++ /dev/null @@ -1,565 +0,0 @@ -/** - * @file 查找轮廓中的关键点 - * @author mengke01(kekee000@gmail.com) - * - * 查找方法为此处文章的方法 - * http://wenku.baidu.com/link?url=Sz1BbYjfA7IeHAMVJ1TPlXiMhACc6sWhHliPJqAUxxtC5K9PYf4j3ile6patUEUMOE_9uJdsS1EGJBFLVbhXcn7Qe8l_FxuT3QVI8nm1aZG - * - * 关键点标记定义： - * - * p.left 左侧类型 - * p.right: 右侧类型 - * 直线为1， - * 曲线为2 - */ - - -define( - function (require) { - - var makeLink = require('../pathUtil').makeLink; - var getCos = require('../vector').getCos; - var getDist = require('../vector').getDist; - - var THETA_TANGENCY = 0.1; // 相切抑制 - var THETA_CORNER = 0.5; // 拐点抑制 - var THETA_MARK_COUNT = 0.8; // 标记点个数抑制 - var THETA_INFLEXION_RANGE = 0.05; // 切线点之间的距离抑制 - - function absCos(p0, p1, p) { - return Math.abs(getCos(p.x - p0.x, p.y - p0.y, p.x - p1.x, p.y - p1.y)); - } - - function isLine(p0, p1, p) { - return 1 - absCos(p0, p1, p) < 0.004; - } - - function isPerfectLine(p0, p1, p) { - return 1 - absCos(p0, p1, p) < 0.002; - } - - function removeOnLinePoint(points) { - // 移除直线上误判的点 - for (var i = points.length - 1, last = i; i >= 0; i--) { - // 这里注意逆序 - var p = points[i]; - var next = i === last ? points[0] : points[i + 1]; - var prev = i === 0 ? points[last] : points[i - 1]; - - if (p.inflexion && isPerfectLine(prev, next, p)) { - points.splice(i, 1); - last--; - continue; - } - } - - return points; - } - - function isSegmentLine(contour, start, end, isLast) { - var contourSize = contour.length; - var mid; - var THETA_DIST = 20; // 判断直线点距离 - - // 判断中间点距离 - if (isLast) { - mid = contour[Math.floor(start.index + (contourSize - start.index + end.index) / 2) % contourSize]; - } - else { - mid = contour[Math.floor((start.index + end.index) / 2)]; - } - - if (getDist(start, end, mid) > THETA_DIST) { - return false; - } - - // 随机选取 几个点进行直线判断 - var startIndex = start.index; - var endIndex = end.index; - if (isLast) { - startIndex = start.index; - endIndex = contourSize + end.index; - } - - var step = Math.floor(Math.max((endIndex - startIndex) / 10, 4)); - var lineFlag = true; - - for (var j = startIndex + step; j < endIndex; j += step) { - if (getDist(start, end, mid) > THETA_DIST) { - lineFlag = false; - break; - } - } - return lineFlag; - } - - - function removeInflexionPoint(points, contour) { - // 移除过多的切线点 - var contourSize = contour.length; - var range; - for (var i = points.length - 1, last = i; i >= 0; i--) { - // 这里注意逆序 - var p = points[i]; - var next = i === last ? points[0] : points[i + 1]; - var prev = i === 0 ? points[last] : points[i - 1]; - - // 两个同为切线点 - if (p.inflexion && next.inflexion) { - range = i === last ? last + 1 - p.index + next.index : next.index - p.index; - if (range / contourSize < THETA_INFLEXION_RANGE) { - if (p.absTheta > next.absTheta) { - points.splice(i, 1); - } - else { - points.splice(i + 1, 1); - } - last--; - continue; - } - } - // 拐点附近的切线点 - else if (p.breakPoint && next.inflexion) { - range = i === last ? last + 1 - p.index + next.index : next.index - p.index; - if (range / contourSize < THETA_INFLEXION_RANGE) { - points.splice(i + 1, 1); - i--; - last--; - continue; - } - } - // 拐点附近的切线点 - else if (p.inflexion && next.breakPoint) { - range = i === last ? last + 1 - p.index + next.index : next.index - p.index; - if (range / contourSize < THETA_INFLEXION_RANGE) { - points.splice(i, 1); - i--; - last--; - continue; - } - } - } - - return points; - } - - - /** - * 对轮廓中的关键点做进一步提取 - * - * @param {Array} contour 轮廓点集 - * @param {Array} breakPoints 关键点 - * @param {number} r 搜索半径 - */ - function filterBreakPoint(contour, breakPoints, r) { - - var contourSize = contour.length; - breakPoints = removeOnLinePoint(breakPoints); - - for (var i = 0, l = breakPoints.length; i < l; i++) { - var isLast = i === l - 1; - var start = breakPoints[i]; - var end = breakPoints[isLast ? 0 : i + 1]; - - // 中间点小于10个，则判断为直线 - var range = isLast ? contourSize - start.index + end.index : end.index - start.index; - if (start.breakPoint && end.breakPoint && range < 10) { - start.right = 1; - end.left = 1; - } - else { - // 判断中间点距离 - if (isLast) { - mid = contour[Math.floor(start.index + (contourSize - start.index + end.index) / 2) % contourSize]; - } - else { - mid = contour[Math.floor((start.index + end.index) / 2)]; - } - - // 夹角接近直线，这里需要对夹角接近直线的点进行修正，使直线点扩大或者缩小 - var isOnLine = false; - if (isLine(start.next, end.prev, mid)) { - var isOnLine = true; - var from = start.next; - var to = end.prev; - - while (absCos(from.prev, to, mid) >= absCos(from, to, mid)) { - if (from.prev !== start) { - from.prev.inflexion = start.inflexion; - from.prev.breakPoint = start.breakPoint; - delete start.inflexion; - delete start.breakPoint; - start = breakPoints[i] = from.prev; - } - from = from.prev; - } - - while (absCos(from, to.next, mid) >= absCos(from, to, mid)) { - if (to.next !== to) { - to.next.inflexion = end.inflexion; - to.next.breakPoint = end.breakPoint; - delete end.inflexion; - delete end.breakPoint; - end = breakPoints[isLast ? 0 : i + 1] = to.next; - to = to.next; - } - } - } - - if (isOnLine || isLine(start, end, mid)) { - if (isSegmentLine(contour, start, end, isLast)) { - start.right = 1; - end.left = 1; - } - else { - start.right = 2; - end.left = 2; - } - } - // 标记待选曲线 - else { - start.right = 2; - end.left = 2; - } - } - } - - if (breakPoints[0] === breakPoints[l - 1]) { - breakPoints.splice(l - 1, 1); - } - - breakPoints = removeInflexionPoint(breakPoints, contour); - - return breakPoints.sort(function (a, b) { - return a.index - b.index; - }); - } - - /** - * 计算当前点的theta值 - * - * @param {Object} cur 当前点 - * @param {Object} leftR 左侧平均 - * @param {Object} rightR 右侧平均 - * @return {number} theta值 - */ - function computeTheta(p, leftR, rightR) { - var leftX = 0; - var leftY = 0; - var t = 0; - var cur = p; - while (t++ < leftR) { - cur = cur.prev; - leftX += cur.x; - leftY += cur.y; - } - leftX = leftX / leftR; - leftY = leftY / leftR; - - // 右侧分量 - var rightX = 0; - var rightY = 0; - t = 0; - cur = p; - while (t++ < rightR) { - cur = cur.next; - rightX += cur.x; - rightY += cur.y; - } - rightX = rightX / rightR; - rightY = rightY / rightR; - - leftX = p.x - leftX; - leftY = p.y - leftY; - rightX = rightX - p.x; - rightY = rightY - p.y; - var theta = Math.acos(getCos(leftX, leftY, rightX, rightY)); - var m = leftX * rightY - rightX * leftY; - if (m > 0) { - return theta; - } - else if (m < 0) { - return -theta; - } - - return 0; - } - - /** - * 标记点的左右已经被访问过了 - * - * @param {Object} p 点 - * @param {number} r 半径 - */ - function markVisited(p, r) { - var j = 0; - var left = p; - var right = p; - p.visited = true; - while (j++ < r) { - left = left.prev; - right = right.next; - left.visited = right.visited = true; - } - } - - - function findLinePoints(contour, breakPoints, r) { - // 根据角点查找竖直和水平线 - var linePoints = []; - - // var fnDirection = function (start, direction, axis) { - // // 查找水平线 - // var count = 0; - // var cur = start; - // while (cur[direction][axis] === cur[axis]) { - // count++; - // cur.visited = true; - // cur = cur[direction]; - // } - - // if (count > 12) { - // start.linePoint = true; - // start[direction === 'prev' ? 'left' : 'right'] = 1; - // cur.linePoint = true; - // cur[direction === 'prev' ? 'right' : 'left'] = 1; - // if (!breakPoints.indexOf(cur) && !linePoints.indexOf(cur)) { - // linePoints.push(cur); - // console.log(cur); - // } - // } - // }; - - var contourSize = contour.length; - for (var i = 0, l = breakPoints.length, last = l - 1; i < l; i++) { - var p = breakPoints[i]; - var next = i === last ? breakPoints[0] : breakPoints[i + 1]; - - var range = i === last ? contourSize - p.index + next.index : next.index - p.index; - if (range < r) { - start.right = 1; - end.left = 1; - } - else { - - - } - - - // fnDirection(breakPoints[i], 'prev', 'x'); - // fnDirection(breakPoints[i], 'next', 'x'); - // fnDirection(breakPoints[i], 'prev', 'y'); - // fnDirection(breakPoints[i], 'next', 'y'); - } - - // breakPoints = breakPoints.concat(linePoints).sort(function(a, b) { - // return a.index - b.index; - // }); - - // for (var i = breakPoints.length - 1, last = i; i >= 0; i--) { - // // 这里注意逆序 - // var p = breakPoints[i]; - // var next = i === last ? breakPoints[0] : breakPoints[i + 1]; - // var prev = i === 0 ? breakPoints[last] : breakPoints[i - 1]; - - // if (p.x === 750 && p.y === 5080) { - // debugger; - // } - - // // 相近点 - // if (p.next === next || p.next.next === next) { - - // if (p.linePoint) { - // breakPoints.splice(i, 1); - // breakPoints[i] = p; - // } - // else { - // breakPoints.splice(i, 1); - // } - - // last--; - // continue; - // } - // } - - - // for (var i = 0, l = breakPoints.length, last = l - 1; i < l; i++) { - // var p = breakPoints[i]; - // var next = i === last ? breakPoints[0] : breakPoints[i + 1]; - // var prev = i === 0 ? breakPoints[last] : breakPoints[i - 1]; - - // var range = i === last ? contourSize - p.index + next.index : next.index - p.index; - // console.log(range); - // if (p.right != 1 && Math.abs(p.x - p.next.x) <= 2 && range > 30) { - // p.right = 1; - // } - // if (p.right != 1 && Math.abs(p.y - p.next.y) <= 2 && range > 30) { - // p.right = 1; - // } - // } - - return breakPoints; - } - - /** - * 查找轮廓中的关键点 - * - * @param {Array} contour 轮廓点集合 - * @return {Array} 轮廓点集合 - */ - function findBreakPoints(contour) { - - contour = makeLink(contour); - var r = contour.length > 16 ? 12 : 4; - var j = 0; - for (var i = 0, l = contour.length; i < l; i++) { - var p = contour[i]; - p.theta = computeTheta(p, r, r); - p.absTheta = Math.abs(p.theta); - - if (p.absTheta > THETA_CORNER) { - p.mark = true; - } - else if (p.absTheta > THETA_TANGENCY) { - p.tangencyMark = true; - } - } - - // 非极大抑制查找角点 - var breakPoints = []; - contour.forEach(function (p) { - if (p.mark && !p.visited) { - j = 0; - var left = p; - var right = p; - - var max = p.absTheta; - while (j++ < r) { - left = left.prev; - right = right.next; - - if (left.absTheta > max) { - max = left.absTheta; - } - - if (right.absTheta > max) { - max = right.absTheta; - } - } - - if (max === p.absTheta) { - p.breakPoint = true; - breakPoints.push(p); - markVisited(p, r); - } - - } - }); - - breakPoints = findLinePoints(contour, breakPoints, r); - - // var thetaMarkCount = THETA_MARK_COUNT * 2 * r; - // var halfThetaMarkCount = 0.5 * thetaMarkCount; - - // contour.forEach(function (p) { - // if (p.tangencyMark && !p.visited){ - // j = 0; - // left = p; - // right = p; - // var leftMark = [0, 0, 0]; // 左侧标记数组，第一个为0的个数，第二个为-1的个数，第三个为1的个数 - // var rightMark = [0, 0, 0]; - // while (j++ < r) { - // left = left.prev; - // right = right.next; - - // var thetaL = computeTheta(left, r, j); - // var thetaR = computeTheta(right, j, r); - - - - // if (Math.abs(thetaL) <= THETA_TANGENCY) { - // leftMark[0]++; - // } - // else if (thetaL < THETA_TANGENCY) { - // leftMark[1]++; - // } - // else if (thetaL > THETA_TANGENCY) { - // leftMark[1]++; - // } - - // if (Math.abs(thetaR) <= THETA_TANGENCY) { - // rightMark[0]++; - // } - // else if (thetaR < THETA_TANGENCY) { - // rightMark[1]++; - // } - // else if (thetaR > THETA_TANGENCY) { - // rightMark[1]++; - // } - - // } - - // // 检查两直线夹角比较小的情况 - // if ( - // leftMark[0] + rightMark[0] >= halfThetaMarkCount - // ) { - - // j = 0; - // var left = p; - // var right = p; - - // var max = p.absTheta; - // while (j++ < r) { - // left = left.prev; - // right = right.next; - - // if (left.absTheta > max) { - // max = left.absTheta; - // } - - // if (right.absTheta > max) { - // max = right.absTheta; - // } - // } - - // if (max === p.absTheta) { - // p.inflexion = true; - // breakPoints.push(p); - // markVisited(p, r); - // } - // } - - // // 检测直线曲线相切点 - // else if ( - // leftMark[2] + rightMark[0] >= thetaMarkCount - // || leftMark[0] + rightMark[2] >= thetaMarkCount - // || leftMark[1] + rightMark[0] >= thetaMarkCount - // || leftMark[0] + rightMark[1] >= thetaMarkCount - // ) { - - // p.inflexion = true; - // breakPoints.push(p); - // markVisited(p, r); - // } - // // 检查曲线相切点 - // else if ( - // leftMark[1] + rightMark[2] >= thetaMarkCount - // || leftMark[2] + rightMark[1] >= thetaMarkCount - // ) { - // p.inflexion = true; - // breakPoints.push(p); - // markVisited(p, r); - // } - // } - // }); - - breakPoints.sort(function (a, b) { - return a.index - b.index; - }); - - return breakPoints; - } - - return findBreakPoints; - } -); diff --git a/demo/js/canvasImage.js b/demo/js/canvasImage.js deleted file mode 100644 index c5bd39d..0000000 --- a/demo/js/canvasImage.js +++ /dev/null @@ -1,116 +0,0 @@ -/** - * @file canvas读取图片 - * @author mengke01(kekee000@gmail.com) - */ - -define( - function (require) { - - var grayImage = require('graphics/image/grayImage'); - var image2Values = require('graphics/image/image2Values'); - var findContours = require('graphics/image/findContours'); - - var ctx = null; - var canvas = null; - var curImage = null; - var thresholdGray = null; - - - - function onUpFileChange(e) { - var file = e.target.files[0]; - var reader = new FileReader(); - reader.onload = function(e) { - - var image = curImage = new Image(); - image.onload = function () { - getContours(image, thresholdFn.value ? thresholdFn.value : +thresholdGray.value); - }; - - image.src = e.target.result; - } - - reader.onerror = function(e) { - console.error(e); - }; - - reader.readAsDataURL(file); - } - - function getContours(image, gray) { - ctx.clearRect(0,0, canvas.width, canvas.height); - var width = image.width; - var height = image.height; - canvas.width = width; - canvas.height = height; - - ctx.drawImage(image, 0, 0, width, height); - var imgData = ctx.getImageData(0, 0, width, height); - - var result = image2Values(imgData, gray); - var contours = findContours(result); - - var putData = imgData.data; - for (var y = 0; y < height; y ++) { - var line = width * y; - for (var x = 0; x < width; x++) { - var offset = line + x; - if (result.data[offset]) { - putData[offset * 4] = 240; - putData[offset * 4 + 1] = 248; - putData[offset * 4 + 2] = 255; - putData[offset * 4 + 3] = 255; - } - else { - putData[offset * 4] = 255; - putData[offset * 4 + 1] = 255; - putData[offset * 4 + 2] = 255; - putData[offset * 4 + 3] = 255; - } - } - } - - contours.forEach(function (contour) { - contour.forEach(function (p) { - var offset = p.y * width + p.x; - putData[offset * 4] = 255; - putData[offset * 4 + 1] = 0; - putData[offset * 4 + 2] = 0; - putData[offset * 4 + 3] = 255; - }); - }); - - - ctx.putImageData(imgData, 0, 0); - } - - - - - var entry = { - - /** - * 初始化 - */ - init: function () { - - document.getElementById('upload-file').addEventListener('change', onUpFileChange); - canvas = document.getElementById("canvas"); - ctx = canvas.getContext("2d"); - thresholdGray = document.getElementById('threshold-gray'); - thresholdFn = document.getElementById('threshold-fn'); - thresholdGray.onchange = function () { - curImage && getContours(curImage, +thresholdGray.value); - } - - thresholdFn.onchange = function (e) { - curImage && getContours(curImage, e.target.value || 200); - } - } - }; - - entry.init(); - - return entry; - } -); diff --git a/demo/js/fitImage.js b/demo/js/fitImage.js index 929a84f..bdefa27 100644 --- a/demo/js/fitImage.js +++ b/demo/js/fitImage.js @@ -84,10 +84,33 @@ define( var image = new Image(); image.onload = function () { ctx.clearRect(0,0, canvas.width, canvas.height); - canvas.width = image.width; - canvas.height = image.height; - ctx.drawImage(image, 0, 0, image.width, image.height); - findImageContours(ctx.getImageData(0, 0, image.width, image.height)); + var width = image.width; + var height = image.height; + canvas.width = width; + canvas.height = height; + ctx.drawImage(image, 0, 0, width, height); + var imgData = ctx.getImageData(0, 0, width, height); + var result = image2Values(imgData, getOptions()); + + var putData = imgData.data; + for (var y = 0; y < height; y ++) { + var line = width * y; + for (var x = 0; x < width; x++) { + var offset = line + x; + if (result.data[offset]) { + putData[offset * 4] = 208; + putData[offset * 4 + 1] = 247; + putData[offset * 4 + 2] = 113; + putData[offset * 4 + 3] = 255; + } + else { + putData[offset * 4] = 255; + putData[offset * 4 + 1] = 255; + putData[offset * 4 + 2] = 255; + putData[offset * 4 + 3] = 255; + } + } + } }; image.src = e.target.result; diff --git a/edp-build-config-node.js b/edp-build-config-node.js index ac00704..87f923b 100644 --- a/edp-build-config-node.js +++ b/edp-build-config-node.js @@ -56,7 +56,8 @@ exports.exclude = [ "demo", "agent/*", "mock", - "test/*", + "test", + "unittest", "edp-*", "output", ".DS_Store", diff --git a/index.html b/index.html index ce6a5a0..d0a8ac0 100644 --- a/index.html +++ b/index.html @@ -28,6 +28,7 @@