3

キャンバスを画像の背景にする考えがあります。キャンバス要素を背景にしたい理由は、ユーザーがログインしたときに画像をぼかしたいからです。それは良い効果だと思います。ページを更新しないので、ぼかし効果をアニメートするのが好きです。それらはすべて互いに依存しているため、ここで複数の質問をするつもりです。

これを作る方法について2つのアイデアがあります。最初のものには、背景画像が設定された単純な div タグがあります。次に、ユーザーがログインすると、スクリプトによってキャンバス要素が作成され、背景画像が div のように配置されます。次に、それをぼかして、div タグの上にフェードインさせます。

もう 1 つの方法は、canvas 要素を最初から作成してから、画像を最初から設定することです。

こんな風に背景画像を作っています。

var canvas = document.getElementById('bg_canvas');
var context = canvas.getContext('2d');
var imageObj = new Image();

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

imageObj.onload = function() {
    context.drawImage(imageObj, 0, 0);
};
imageObj.src = '2.jpg';

わかりました..それは簡単な部分です..drawImage関数の高さまたは幅を に設定する方法が必要ですauto。幅が高さよりも大きい場合、高さを自動に設定します。画像を画面いっぱいに広げたくありません。どうすればいいですか？

今問題番号 2. ユーザーが画面のサイズを変更すると、canvas 要素内の画像のサイズも変更したいと考えています。ぼやけたり、ぼやけなかったり。

私はそれが次のようなものに設定されると仮定します:

$(document).ready(function() {
    winResize();
    $(window).resize(function() {
        winResize());
    }
});

function winResize() {
    var canvas = document.getElementById('bg_canvas');
    var context = canvas.getContext('2d');
    var imageObj = new Image();

    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    imageObj.onload = function() {
        context.drawImage(imageObj, 0, 0, canvas.height, canvas.width);
    };
    imageObj.src = '2.jpg';
}

今でも、画像の高さまたは幅の自動メカニズムが必要です。

オンラインのどこかで見つけることができるはずなので、ぼかし効果を求めるつもりはありませんが、ぼかしバージョンでフェードインするときに何をすることをお勧めするかを知りたいです. キャンバス要素内でフェードする方法があるはずだと覚えていないので、既存のキャンバスを複製してからぼかしてからフェードインする必要があるかもしれません。

4

1 に答える 1

5

プレーンな画像をロードし、キャンバスを使用して画像のぼやけたバージョンを作成し、それを実際の画像に変換して、<img>または css バックグラウンドで使用します。

function blurImage(imgURL) {
  var img = new Image();
  img.onload = function() {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;
    var context = canvas.getContext("2d");
    context.drawImage(img,0,0);
    /*
        code that actually blurs the image goes here
    */
    var dataURI = canvas.toDataUrl("image/png");
    setBlurredImage(dataURI);
  };
  img.src = imgURL;
}

セットハンドラーを使用：

function setBlurredImage(dataURI) {
  whateverElement.style.background = "url(" + dataURI + ")";
}

これで、ぼやけた背景画像ができました。

于 2013-06-03T16:27:10.360 に答える