0

2日間悩まされている問題があります。

小さな音楽共有サイトを開発していますが、プレーヤーのデザインに問題があります。

CSSを使用してdivにぼかした画像の背景を適用し、すべてpixastic jsライブラリを使用して、JSを介して画像にぼかしを適用したいと考えています。$('.footer').css('background', "url(" + img.toDataURL("image/png")+ ")" });問題は、toDataURL がキャンバス要素でのみ機能するため、pixasticが CSS に適用できない HTMLImageElement ウィッチを提供することです。どうやってやるの？

これまでの私のコードは次のとおりです。

 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は、lastfm API を使用してアルバム アートワークを指す http url です。

4

1 に答える 1

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")+ ")" });
}
于 2013-06-23T22:51:31.463 に答える