Blur image with pixastic and set it as background with jquery - php

Question

i have a problem that is bothering me form 2 days.
I'm developing a little music sharing site and i have a problem making the design for the player.
I want to apply a blurred image background to a div with CSS and with the blur begin applied on the image via JS all with pixastic js library. The problem is that pixastic gives me a HTMLImageElement witch i can't apply to a css with $('.footer').css('background', "url(" + img.toDataURL("image/png")+ ")" }); since toDataURL works only with canvas elements.
How can i do that?
My code so far is:
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")+ ")" });
The $hd is a http url that points to an album artwork using lastfm API

Answer 1

I'm not sure about first argument of css method and why you dont use img.src as url of image? Try something like this:
$('.footer').css('background-image', 'url(' + img.src + ')');
Ok I found probably answer on documentation:
var options = {};
Pixastic.process(image, "action", options);
options.resultCanvas; // <- holds new canvas
So in your case it would be:
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")+ ")" });
}