opencv 画像処理

Question

python,django,opencvを使って画像処理アプリを作成しています。

このようなスライドバーで画像の「色相」「明度」「彩度」を調節できるようなwebアプリを
作ろうとしているのですが色々と調べてみてもやり方がよくわからなくて困っています。

djangoで画像のアップロード機能を作成してそれをopencvでグレースケールに
変換するみたいなことはできました。

opencvのトラックバーというものを使ってr,g,bの値をスライドして画像処理をしている
チュートリアルがあったのですが、windowdでの操作なのでそれをwebのブラウザ上で
操作するにはどうしたらいいのでしょうか、また可能なのでしょか？

Answer 1

ブラウザ上から値を送ると、その設定で画像を返すAPIを作り、あとはブラウザ上でスライダーを作るというのが一番ありがちな実装です。

スライダーの値の送信は、一定間隔未満にならないように送ったり、前の処理を待つようにできるとベストです。

もう一つはブラウザ上のOpenCVを組み込む手もあるようなのですが、自分もちょっと試そうとしている段階なので、どのくらい手軽かは...。ちょっとおすすめしづらいかも。

Comments

[miso_soup]

回答ありがとうございます。
＞＞ブラウザ上から値を送ると、その設定で画像を返すAPIを作り、あとはブラウザ上でスライダーを作るというのが一番ありがちな実装です。
ここのところはopencvを使わずにjavascriptなどを使ってやるということなんでしょうか？

スライダーの値の送信は、一定間隔未満にならないように送ったり、前の処理を待つようにできるとベストです。

[otolab]

こっちはスライダーの機能としてjavascriptとして実装ですね。

> スライダーの値の送信は、一定間隔未満にならないように送ったり、前の処理を待つようにできるとベストです。

https://lodash.com/docs/4.17.11#debounce
こういう機能と、ajaxでの非同期問い合わせの処理を組み合わせると、わりと簡単に実装できます。

[miso_soup]

なるほどそうなんですね。乗せてもらったリンクを見たんですけど、どういうことをしているのかあまり理解
できなかったです。

opencvを使ってスライダーの値が動いたら画像の明るさ、色などを変化する処理をwebアプリに
組み込むのはやはり難しいということでしょうか？

[otolab]

opencvにスライダーを作る機能があるんでしたっけ？（昔のしか触ったことなくてちょっと分からない）

UIについては、UIとして適したものを使い、その情報を元に、裏側でOpenCVを動かして処理するというのが普通だと思っていました。

なので、Webアプリから操作するならHTML/CSS/Javascriptでスライダーを作って、サーバサイドでOpenCVを動かすイメージで考えています。

[miso_soup]

すみません私の説明が悪かったです。
私もこのように考えています。
>Webアプリから操作するならHTML/CSS/Javascriptでスライダーを作って、サーバサイドでOpenCVを動かすイメージで考えています。

このような方法で画像の「色相」「明度」「彩度」を調節できるような機能は簡単に作れるのでしょうか？

[otolab]

https://element.eleme.io/#/en-US/component/slider
こういうのを使う感じにはなりますね。
「簡単」かどうかは慣れと腕前による気はします。。

Webアプリに慣れていないなら、普通にアプリを作るほうが楽な場合もありますし、どうしてもWebアプリである必要があるのなら、がんばるほか無いかと。

それと。。

> opencv　画像処理

というよりも、処理のためのUI作成の話が中心になっているように思うので、別の名前で質問を立て直したほうが良いかもしれません。