使用 StackBlur 作为 div 的背景图像 [关闭]答案

【问题标题】：Use StackBlur as background Image for a div [closed]使用 StackBlur 作为 div 的背景图像 [关闭]
【发布时间】：2015-06-20 14:19:47
【问题描述】：

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

【问题讨论】：

请分享您为实现此目标而编写的代码。

标签： jquery html canvas html5-canvas blur

【解决方案1】：

由于所需的代码只有大约 7 行长……就在这里！ :-)

这是一个如何使用 Quasimondo 的 StackBlur.js 模糊图像并将其设置为 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，因此请确保您想要模糊的任何图像都与您的网页在同一个域中提供。（这是跨域安全要求）。

【讨论】：

哦，你最后的“笔记”对我来说很糟糕。我想将它用于ihavenotv.com，所有图像都来自第 3 方服务器 :)
出于非常好的安全原因而存在跨域限制，不能违反或解决。您必须让那些第 3 方服务器同意使用满足跨域安全限制的适当标头来提供其图像。否则，您无法模糊来自 3rd 方服务器的图像，您将不得不重新设计您的应用程序。 Stackoverflow 的 @KenFyrstenberg 包含一个符合跨域限制的伪模糊编码。这不是真正的模糊，但看起来仍然不错：github.com/epistemex/realtime-blur-js（他编写了几个版本——你需要伪模糊）。
感谢 markE 的解释。你可以为这个实时模糊构建一个 jsfiddle，用于 div 的背景（通过使用画布）吗？我会给你一大杯啤酒，通过贝宝：P