StackOverflow_19618029: html5-image-blur-with-stackblur

Illustration of answer to http://stackoverflow.com/questions/19618029/html5-image-blur-with-stackblur.

by ExpertSystem

HTML

<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://www.quasimondo.com/StackBlurForCanvas/StackBlur.js"></script>
Original image:
<img id="srcimg" src="http://fiddle.jshell.net/favicon.ico" />
<button id="blurit">Blur it</button>
Blurred image:
<canvas id="canvas"></canvas>

CSS

* {
    vertical-align: middle;
}

#canvas {
    border: 1px solid black;
}

JavaScript

$("#blurit").on("click", function() {
    stackBlurImage("srcimg", "canvas", 3, false);
});

$(document).ready(function() {
    $("#canvas").css("width", $("#srcimg").css("width"));
    $("#canvas").css("height", $("#srcimg").css("height"));
});