# Canvas-based JavaScript Blur detection

DevFeed: [Canvas-based JavaScript Blur detection](<https://devfeed.tech/articles/canvas-based-javascript-blur-detection-26341.md>)

Original publisher: [Read original article](<https://medium.com/revolut/canvas-based-javascript-blur-detection-b92ab1075acf?source=rss----44c5ac415e14---4>)

Author: Eremingeorgy

Published: 2024-01-22T08:38:54Z

Content type: article

Language: en

Sources: [Revolut Engineering](<https://devfeed.tech/sources/revolut-engineering.md>)

Topics: [JavaScript](<https://devfeed.tech/topics/javascript.md>), [Canvas](<https://devfeed.tech/topics/canvas.md>), [Algorithm](<https://devfeed.tech/topics/algorithm.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [algorithm](<https://devfeed.tech/tags/algorithm.md>), [blur-detection](<https://devfeed.tech/tags/blur-detection.md>), [canvas](<https://devfeed.tech/tags/canvas.md>), [case-study](<https://devfeed.tech/tags/case-study.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [library](<https://devfeed.tech/tags/library.md>), [typescript](<https://devfeed.tech/tags/typescript.md>)

## AI overview

The article describes developing a JavaScript algorithm to detect whether an image is blurred and estimate the degree of blur. The work began during development of a banking KYC module because existing open-source solutions did not meet the requirements, and it discusses potential client-side image-quality applications.

## Source excerpt

Introduction While developing the Know Your Customer (KYC) module in the banking sector, we faced a specific challenge. KYC is a process where banks verify the identity and assess the risk profile of their clients. As part of this module's development, we needed a JavaScript library that was capable of analysing images -- specifically, we required it to detect if an image is blurred and, importantly, to determine the degree of that blur. This functionality was crucial because clear images are essential for accurate identity verification in KYC processes so a dedicated library was needed. Unfortunately, there were no suitable solutions in opensource that fulfilled criteria satisfactorily. Left with no alternative, we embarked on creating an algorithm on our own. The outcome was a user-friendly algorithm that effortlessly checks any image for the presence and degree of blur. From the voluminous inquiries we observed on platforms like StackOverflow, it became evident that our solution could greatly benefit the community. This utility has significant potential for diverse applications, such as image quality analysis on the client side. Yet, surprisingly, a modern, uncomplicated, resource-friendly library to tackle this common problem remains absent in today's software landscape. Our experience, therefore, not only serves as a case study, but also underscores the urgent need for such a library in the JavaScript/TypeScript ecosystem. Relevance In an era where the visual web dominates, the quality of images plays a significant role in user engagement and experience. Blurry images can tarnish user perceptions and limit the effectiveness of visual communication. Yet, our research has shown a glaring gap in the JavaScript/TypeScript ecosystem: the lack of a simple, accessible tool to detect and quantify image blur. This absence impacts developers, businesses, and users alike, leaving a critical need unmet. In the digital age, the quality of visuals is paramount across a broad