使用pixastic模糊图像，并使用jquery将其设置为背景 - Blur image with pixastic and set it as background with jquery

Blur image with pixastic and set it as background with jquery

我有一个问题困扰了我两天。

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

我想用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 指向专辑艺术作品

我不确定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")+ ")" });
}