Blur image with pixastic and set it as background with jquery

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")+ ")" });
}