<![CDATA[Edge detection in binary images frequently suffers from contour fragmentation when utilizing conventional gradient operators (e.g., Sobel, Canny), as they inherently rely on continuous intensity variations absent in discrete binary data. To address this, this study proposes a lightweight, client-side morphological gradient framework designed to structurally and topologically extract object boundaries based purely on spatial geometry. A modular web-based computational pipeline was developed using a PHP-JavaScript architecture, integrating adaptive Otsu binarization, dynamic kernel configurations, and core morphological computations. For rigorous algorithmic and engineering validation, the system was benchmarked against the conventional Canny detector using a dataset of 50 botanical images, supplemented by comprehensive white-box and black-box software testing involving 20 participants across 20 distinct test cases. Experimental results demonstrate that the proposed morphological framework achieves superior topological fidelity and boundary continuity. It secured an optimal F1-score of 0.9006 using a 3×3 disk structuring element, significantly outperforming the Canny detector’s F1-score of 0.7761. Furthermore, the method exhibits highly parallelizable efficiency, executing edge extraction at a mean runtime of 18.2 ms, more than twice as fast as the multi-stage Canny operator (42.5 ms). Software evaluations confirmed exceptional system reliability, yielding a 97.4% functional success rate, 95% overall module coverage, and an excellent usability score of 4.58/5.0. Ultimately, this research proves that shifting the paradigm from intensity differentiation to mathematical morphology offers a highly precise, robust, and computationally lightweight solution for real-time, web-native binary image segmentation.]]>
