jquery - Use StackBlur as background Image for a div -

i like, if possible, use stackblur.js set background of div specified image, let's one: http://img.youtube.com/vi/2uphazryvpy/mqdefault.jpg, don't know how accomplish this.

since code required 7 lines long...here is! :-)

here's example of how use quasimondo's stackblur.js blur image , set background of div:

var img=new image();  img.crossorigin='anonymous';  img.onload=start;  img.src="https://dl.dropboxusercontent.com/u/139992952/idcard1.png";  function start(){      blurimagetobackground(img,document.getelementbyid('mydiv'));  }    function blurimagetobackground(img,element){      var c=document.createelement('canvas');      var ctx=c.getcontext('2d');      c.width=img.width;      c.height=img.height;      ctx.drawimage(img,0,0);      stackblurcanvasrgba(c,0,0,c.width,c.height,8)      element.style.background='url('+c.todataurl()+')';  }

body{ background-color: ivory; }  #mydiv{width:472px; height:286px; border:1px solid red;}

<script src="https://rawgit.com/flozz/stackblur/master/stackblur.js"></script>  <h4>please patient while image blurs , loads :-)</h4>  <div id=mydiv width=472 height=286></div>

note: stackblurjs requires use of context.getimagedata sure image want blur served in same domain webpage. (this cross-origin security requirement).