{"id":871,"date":"2025-06-15T11:49:09","date_gmt":"2025-06-15T09:49:09","guid":{"rendered":"https:\/\/renor.it\/evaluation-of-the-level-of-blur-by-laplacian-variance\/"},"modified":"2025-12-20T23:49:35","modified_gmt":"2025-12-20T22:49:35","slug":"evaluation-of-the-level-of-blur-by-laplacian-variance","status":"publish","type":"post","link":"https:\/\/renor.it\/en\/blog\/artificial-intelligence-algorithms\/evaluation-of-the-level-of-blur-by-laplacian-variance\/","title":{"rendered":"Evaluation of the level of Blur by Laplacian Variance"},"content":{"rendered":"\n

Our App for people with celiac disease and food intolerances, CeliachIA<\/strong>, allows users to instantly check for the presence of gluten in products that are not already database-censored: the user photographs the ingredient list on the label and a fine-tuned computer vision<\/strong> model processes the image, returning the answer in seconds.<\/p>\n\n

During the development phase, we ran into a crucial hurdle: ensuring that the photograph of the ingredients was sharp enough to allow accurate text extraction (OCR) and, consequently, reliable analysis. On the backend, Google Cloud Vision<\/strong> already provides an OCR confidence indicator; by applying appropriate thresholds we could decide whether to continue with the analysis or reject the image for poor quality. However, delegating this control to the cloud comes at an unnecessary cost; we still pay for the invocation of an external service even when the photo is obviously unusable. <\/p>\n\n

Therefore, to minimize costs, it was essential to move quality control to the client<\/strong>. We developed a JavaScript function, based on the Laplacian variance<\/strong>, that evaluates image sharpness in real time: the library can be run directly during camera preview, avoiding sending out-of-focus or blurry shots to the backend. In this way we achieve a double optimization: the user experience improves (the \u201cblurry image\u201d feedback is immediate) and cloud processing costs are significantly reduced. <\/p>\n\n

Measuring the sharpness of an image with the Laplacian variance<\/h2>\n\n

The perceptual quality of a photograph is highly dependent on sharpness: an image out of focus or affected by motion blur looks unattractive and, in various application areas (computer vision, diagnostics, mobile photography), can compromise the entire automatic analysis process. <\/p>\n\n

There are numerous techniques for quantitatively estimating the level of blur. In this paper, we present a fast approach, free of external dependencies and suitable for real time, based on the variance of the Laplacian operator<\/strong>. We will start with the theoretical fundamentals and then arrive at a complete implementation in JavaScript, accompanied by a small Web interface for testing purposes. <\/p>\n\n

The ultimate goal will be to build a widget that assigns a score from 1 to 10 to the sharpness of any image uploaded by the user. <\/p>\n\n

Sharpness as a frequency issue<\/h2>\n\n

Each digital image can be seen as the sum of components at different spatial frequencies: <\/p>\n\n

    \n
  • Low frequencies<\/strong> have slow variations, uniform areas, and smooth gradients<\/li>\n\n\n\n
  • High frequencies<\/strong> result in abrupt transitions, edges, fine details.<\/li>\n<\/ul>\n\n

    A blur acts as a low-pass filter<\/strong>, that is, it attenuates high frequencies. So the blurrier an image is, the less residual energy we will have in the high-frequency spectrum. <\/p>\n\n

    The project will then work on translating this observation into a single number that is easy to interpret. <\/p>\n\n

    The variance of the Laplacian: from millions of pixels to a single number<\/h2>\n\n

    Once we apply the Laplacian filter to the image, we get a new matrix where each value represents the local change in light intensity. But how can we condense this information into a single numerical value<\/strong> that objectively describes how sharp the image is? <\/p>\n\n

    The simplest and most effective answer is: calculate the variance of these values<\/strong>.
    Because of what was said before, a well-focused image has many sharp edges and transitions therefore the values of the Laplacian are widely distributed, both positive and negative: there is therefore high variance.
    A blurred image, blurs the edges therefore the values of the Laplacian are close to zero and little variable: there is therefore low variance. <\/p>\n\n

    The variance measures precisely how far the values deviate from the mean: the larger this deviation, the more detail and sharpness the image contains. <\/p>\n\n

    Mathematical definition<\/h2>\n\n

    Given a Laplacian response matrix \"$L_i$\", where \"$i$\" denotes each valid pixel (excluding the edge), we calculate:<\/p>\n\n

    \"mu = frac{1}{N}sum_{i=1}^{N} L_i, qquad sigma^2 = frac{1}{N}sum_{i=1}^{N}(L_i - mu)^2\"<\/p>\n\n

    Where:<\/p>\n\n

      \n
    • \"$mu$\" is the average of the Laplacian values;<\/li>\n\n\n\n
    • \"$N$\" is the total number of pixels involved (usually $(w – 2)(h – 2)$);<\/li>\n\n\n\n
    • \"$sigma^2$\" is the variance of the Laplacian<\/strong>, i.e., our sharpness indicator.<\/li>\n<\/ul>\n\n

      Now we need to go from a raw value to an interpretable score. <\/p>\n\n

      Values of \"$sigma^2$\" depend on hardware and environmental variables: resolution, noise, JPEG compression, lens quality. Therefore, it does not make sense to use a fixed threshold: we need to normalize<\/strong> the value against an empirical range. <\/p>\n\n

      We define:<\/p>\n\n

        \n
      • \"$T_{min}\"$: typical variance of a very blurry photo \u2192 corresponds to score 1<\/strong>;<\/li>\n\n\n\n
      • \"$T_{max}\"$: typical variance of a perfectly sharp photo \u2192 corresponds to score 10<\/strong>.<\/li>\n<\/ul>\n\n

        Therefore:<\/p>\n\n

        \"text{score} = 1 + 9 times operatorname{clamp}left(frac{sigma^2 - T_{min}}{T_{max} - T_{min}}, 0, 1right)\"<\/p>\n\n

        After calculation, the value is rounded to the nearest integer to return a score between 1 and 10. This approach also makes the result readable for the end user, as well as useful for software-side control logic. <\/p>\n\n

        Implementation in JavaScript<\/h2>\n\n

        The algorithm can be implemented in pure JavaScript using the Canvas API to access the pixels of an image uploaded or taken by camera. The following function takes as input an HTML element ( <img><\/code>, <canvas><\/code>, <video><\/code> o ImageBitmap<\/code>) and returns an object with score<\/code> (1-10) e variance<\/code>.<\/p>\n\n

        <\/g><\/svg><\/span>