/** * @file canvas读取图片 * @author mengke01(kekee000@gmail.com) */ define( function (require) { var lang = require('common/lang'); var ImageProcessor = require('graphics/image/ImageProcessor'); var ContourPointsProcessor = require('graphics/image/ContourPointsProcessor'); var pathsUtil = require('graphics/pathsUtil'); var editor = require('editor/main'); var ctx = null; var canvas = null; var curImage = 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); }; image.src = e.target.result; } reader.onerror = function(e) { console.error(e); }; reader.readAsDataURL(file); } 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 = new ImageProcessor(imgData).binarize(+$('#threshold-gray').val()).get(); 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] === 0) { 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; } } } contourProcessor = new ContourPointsProcessor(); contourProcessor.import(result); var contours = contourProcessor.get(); 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); getBreakPoint(); var contours = contourProcessor.getContours(); window.editor.setFont({ contours: pathsUtil.flip(contours) }); } function getBreakPoint() { var breakPoints = contourProcessor.getBreakPoints(); breakPoints.forEach(function (p) { ctx.beginPath(); if (p.breakPoint) { ctx.fillStyle = 'red'; } else if (p.inflexion) { ctx.fillStyle = 'blue'; } else if (p.tangency) { ctx.fillStyle = 'green'; } ctx.fillRect(p.x, p.y, p.right == 1 ? 6 : 3, p.right == 1 ? 6 : 3); }); } function refresh() { curImage && getContours(curImage); } var entry = { /** * 初始化 */ init: function () { window.editor = editor.create($('#render-view').get(0)); document.getElementById('upload-file').addEventListener('change', onUpFileChange); canvas = document.getElementById("canvas"); ctx = canvas.getContext("2d"); $('#threshold-gray').on('change', refresh); var img = new Image(); img.onload = function () { curImage = img; refresh(); }; img.src = '../test/qg.jpg'; } }; entry.init(); return entry; } );