Canvasの画像をぼかしたい

Question

現在Monacaでアプリを開発しています。
アプリ内で画像を縮小して保存する処理をいれており、この際に画像をぼかしたいと考えています。

画像縮小の処理（下記コード）では、Canvasを作成し、サイズを指定し、そこに画像ファイルを流し込むことで、縮小を実現しています。

画像をぼかしたい場合、Canvasに対してぼかしを掛ける方法があるようで、それを実現してくれそうなライブラリとして『Konva.js』を見つけました。このライブラリのぼかし機能を使えばできるかもしれないと思うところまで来ました。しかしそこにあるサンプルコードをどのように組み込めば、Canvasにぼかしを適用できるのか全く分かりません。

サンプルでは『lion』がCanvas？に相当していそうで、これに対してぼかしフィルタを掛けています。これをCanvas・Blobデータに変換できればいけそうな気はしますが、その方法が分からないところです。

ちなみに上記サンプルではスライダーでぼかしの大きさを変えられるようになっていますが、決め打ちの大きさでぼかせられれば問題ありません。

Canvasについて詳しい方、よろしくお願いいたします。

function imageResize (){

    var image     = new Image();
        image.src = 画像URL;
        image.onload = function (e){

            var canvas = document.createElement('canvas');

            canvas.width = 300;   
            canvas.height = 300;
            canvas.getContext("2d").drawImage(image, 0, 0, 300, 300);

            // おそらくここでぼかし処理を入れるコードが入る

            // カンバスデータをblobに変換
            canvas.toBlob(function(blob) {
                →blobデータをファイル保存する処理へ
            }, "image/jpeg");
        }
}

Answer 1

スマホからなので簡単に
blur()でぼかせば良いのでは？

• Canvas編

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/filter

• CSS Filter編

filter - CSS: カスケーディングスタイルシート | MDN

Comments

[agepan]

画像のぼかし処理をスマホ上で実行させたい都合があり、このblur()はiOS Safariが対応していないようです。

[oikashinoa]

スマホからなので簡単に。
以下を読むと使い方わかると思います。

https://konvajs.org/docs/overview.html

[oikashinoa]

CanvasのBlur()ではなくCSS Filterにもblur()有りました。コッチは表を見る限りsafari対応です。

本文にurlを書きました
filter: blur(15px);

[agepan]

ありがとうございます、上記のページをよく読んでみます。
CSSにも確かにBlurがあるんですが、画像の大きさによってはスマホでは結構負荷が掛かってくるので、使い方次第なところがありますね。この点についてもさらにちょっと調べてみようと思います！

[oikashinoa]

想像ですが、CSSの方が負荷は低いはずです。

>アプリ内で画像を縮小して保存する処理をいれており、この際に画像をぼかしたいと考えています。
サムネイルとしてぼかしたものを作るのかなと思ってたんですが結構大きいのですかね？