用pixastic模糊圖像，並使用jquery將其設置為背景

Question

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

我正在開發一個音樂共享站點，但在為播放器設計時遇到了問題。

我想使用CSS將模糊的圖像背景應用於div，並且通過pixastic js庫通過JS開始對圖像應用模糊。 問題是pixastic給了我一個HTMLImageElement巫婆，我不能用$('.footer').css('background', "url(" + img.toDataURL("image/png")+ ")" }); 因為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網址，它使用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")+ ")" });
}