模糊pixastic的圖像，並將其設置爲jQuery的背景

Question

我有一個問題困擾着我2天。

我正在開發一個小小的音樂分享網站，我有一個問題，使玩家的設計。

我想將一個模糊的圖像背景應用於CSS的div，並且模糊開始在圖像上通過JS與pixastic js庫一起應用。問題是pixastic給了我一個HTMLImageElement巫婆，我不能將它應用於$('.footer').css('background', "url(" + img.toDataURL("image/png")+ ")" });的css，因爲toDataURL只適用於canvas元素。 我該怎麼做？

到目前爲止我的代碼是：

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

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