使用 pixastic 模糊图像并使用 jquery 将其设置为背景

Question

我有一个问题困扰我 2 天。

我正在开发一个小型音乐共享网站，但在为播放器设计时遇到了问题。

我想使用 CSS 将模糊的图像背景应用于 div，并通过 JS 开始将模糊应用于图像，所有这些都使用 pixastic js 库。问题是 pixastic 给了我一个 HTMLImageElement 女巫，我不能用$('.footer').css('background', "url(" + img.toDataURL("image/png")+ ")" }); 应用到css，因为 toDataURL 只适用于画布元素。 我该怎么做？

到目前为止我的代码是：

 var img = new Image();
    img.src = '<?php echo $hd ?>';
    img.onload = function() {
    Pixastic.process(img, "blurfast", {amount:1});
    }

    $('.footer').css('background', "url(" + img.toDataURL("image/png")+ ")" });

$hd 是一个 http url，它使用 lastfm API 指向专辑封面

Answer 1

我不确定 css 方法的第一个参数以及为什么不使用 img.src 作为图像的 url？尝试这样的事情： 罢工>

$('.footer').css('background-image', 'url(' + img.src + ')');

好的，我在文档中找到了可能的答案：

var options = {};
Pixastic.process(image, "action", options);
options.resultCanvas; // <- holds new canvas

所以你的情况是：

var img = new Image(),
    options = {};

options.amount = 1
img.src = '<?php echo $hd ?>';
img.onload = function() {
    Pixastic.process(img, "blurfast", options);
    $('.footer').css('background', "url(" + options.resultCanvas.toDataURL("image/png")+ ")" });
}