0

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

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

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

到目前为止，我的代码是：

 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是一个使用 lastfm API 指向专辑插图的 http url

4

1 回答 1

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")+ ")" });
}
于 2013-06-23T22:51:31.463 回答