Использование StackBlur в качестве фонового изображения DIV

Question

Я хотел бы, если это возможно, использовать StackBlur.js, чтобы установить фон на DIV до определенного изображения, скажем, это одно: http://img.youtube.com/vi/2UphAzryVpY/mqdefault.jpg, но я действительно не знаю, как для этого.

Answer 1

Поскольку код требуется всего около 7 строк ... вот оно! :-)

Вот пример того, как использовать StackBlur.js Quasimondo, чтобы размыть изображение и установить его в качестве фона в 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 be patient while the image blurs and loads :-)</h4> 
 
<div id=myDiv width=472 height=286></div>

Примечание: Для использования StackBlurJS необходимо использовать context.getImageData, так что убедитесь, что im im возраст, который вы хотите размыть, подается в том же домене, что и на веб-странице. (Это требование безопасности для перекрестного происхождения).