ピクセル化されたカスタムフェードインにぼやけた

Question

jQueryまたはJSでカスタムフェードインを作成しようとしています。私は、フェードが誇張され、非常にぼやけて、ピクセル化してから、はっきりした鮮明な画像になることを望みます。ページの読み込み、1回。

これは1つの画像用です。はい、tradditionalyは私が推測するアニメーションGIFを作成することによって行われます。しかし、jQueryで効果を書くことはできますか？

ページの読み込み時。画像を取得する#div

画像がぼやける>次にピクセルが入る>そして、元のHQ画像がクリアされます。

Answer 1

あなたはこのような単純な方法で直接キャンバスを使用することができ、画像をピクセル化するために（ここでは画像がすでにロードされていると仮定した場合）：

/// get a block size (see demo for this approach) 
size = blocks.value/100, 
w = canvas.width * size, 
h = canvas.height * size; 

/// draw the original image at a fraction of the final size 
ctx.drawImage(img, 0, 0, w, h); 

/// turn off image aliasing (see comment below) 
ctx.mozImageSmoothingEnabled = false; 
ctx.webkitImageSmoothingEnabled = false; 
ctx.imageSmoothingEnabled = false; /// future 

/// enlarge the minimized image to full size  
ctx.drawImage(canvas, 0, 0, w, h, 0, 0, canvas.width, canvas.height); 

Here is an online demo。

下部にあるスライダを使用して、さまざまなサイズと速度を確認できます（スライダを移動するときにChromeを使用してライブアップデートを表示するか、単にアニメーションボタンを押すだけです）。

補間（画像スムージング）をオフにすると、新しい拡大画像がぼやけて見えます。この方法は、主に画像のスムージングが主なブラウザではオフにできるため、他のほとんどのアプローチよりも高速です。

は、ほとんどのブラウザでオフスムージング有効にする方法についてのより完全な指示のためにこの回答を参照してください。
Images in web browser are slightly blurred. How to disable it?

最後drawImageは（ここでは、それ自体をキャンバス）ソースのクリッピングされた部分を使用します。このメソッドの使用方法については、here for more detailsを参照してください。

ぼかし効果については、このプロセスには大きなオーバーヘッドがあり、ほとんどの一般的なコンピュータでは一時停止が目立つため、イメージをあらかじめぼかしておくことをお勧めします。 （例えば、その画像に基づいて、自分自身のアニメーションGIF作る）
http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html

Answer 2

I would check this link、そこから行きます。 javascriptの最も重要な部分は、非常に怠惰なアイデアを持っているということです。

Answer 3

Close PixelateはDavid DeSandroが使用できます。 The Pixelatorは実際の動作例です。