あなたはこのような単純な方法で直接キャンバスを使用することができ、画像をピクセル化するために(ここでは画像がすでにロードされていると仮定した場合):
/// 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
出典
2013-08-28 00:08:50
K3N
これは、ある特定の画像のためです:
あなたは、静止画像をぼかしたい場合は、あなたがこのスタック・ブラーを使用することができる「ライブ」?または、たくさんの画像で使いたいエフェクトですか? – jfriend00
何を試しましたか?これを行うには、 'canvas'要素を使って画像フィルタを適用します。 – Cristy
BlurはCSS3で実現できますが、ピクセル化はできません。 – Jonathan