Question

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

我正在开发一个小小的音乐分享网站，我在为播放器制作设计时遇到了问题。

我想将模糊的图像背景应用于带有CSS的div，并且通过JS使用pixastic js库将模糊开始应用于图像。问题是pixastic给了我一个HTMLImageElement，因为toDataURL只适用于canvas元素，所以我无法应用于$('.footer').css('background', "url(" + img.toDataURL("image/png")+ ")" });的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是一个http网址，指向使用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")+ ")" });
}

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

1 个答案: