使用StackBlur作为div的背景图像

Question

如果可能的话，我希望使用StackBlur.js将DIV的背景设置为指定的图片，让我们这样说： http://img.youtube.com/vi/2UphAzryVpY/mqdefault.jpg，但我真的不知道如何做到这一点。

Answer 1

由于所需的代码只有大约7行...这里是！的： - ）

以下是如何使用Quasimondo的StackBlur.js模糊图像并将其设置为div的背景的示例：

＆＃13;

＆＃13;

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()+')';
}

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

注意： StackBlurJS需要使用context.getImageData，因此请确保您要模糊的任何图片都在与您的网页相同的域中提供。 （这是跨源安全要求）。