Canvas-based blur detection with JavaScript

By Timo

DaWanda Dev
Jun 5, 2015 · 6 min read

Motivation

banker’s lamp by Palazzo Int

‘Why is this image bad?’


Measuring blur


Detecting vertical edges

px1 px2 px3 px4 C px5 px6 px7 px8
13 120 111 46 87 104 9 114 5
(px1 * -1) + (px2 * 0) + (px3 * 1) + (px4 * -2) + (C * 0) + (px5 * 2) + (px6 * -1) + (px7 * 0) + (px8 * 1)
-13 + 111 - 92 + 208 - 9 + 5 = 210

Measuring the width of vertical edges


Core algorithm in JavaScript


Inspector Bokeh at work


Conclusion


Code O’Clock

DaWanda Developers Blog

DaWanda Dev

Written by

The official DaWanda developer account. ❤️ https://www.codeoclock.com ❤️ https://dawanda.com ❤️ https://jobs.dawanda.com

Code O’Clock

DaWanda Developers Blog