わかりやすい画像のdiffを求めて - Qiita

どうも。フロントエンドエンジニアの @Quramy です。 さて、前回、1日10万枚の画像を検証するためにやったことで書いているとおり、reg-suitという画像に特化した回帰テストツールをメンテしています。 画像回帰テストという文脈において、差分の可視化方法はとても重要なファクターです。なぜなら、画像(=スナップショット)に差分が発生したからといって、それすなわち棄却、というわけではなく、その差分の内容を判断して、意図せぬ変更であれば棄却、意図した変更であればexpectedを更新する必要があります。すなわち、ワークフローに目視による差分のレビューが発生するのです。 そこで、少しだけ異なる2枚の画像について差分を効果的に可視化する、というテーマに向き合ってみました。 主にC++とOpenCVでの実装ですが、これらの知識が無くとも読めるよう、コードやAPIへの言及を少なくして、中間画像で説

[teppodone]

“間違い探しといえばOpenCV”#てぽめも

[hokkey]

これすごい！デザインのチェックにも使えそう

[takuwz]

“2Up, Swipe, Onion Skinning”

[macneko-ayu]

スクリーンショット比較が捗る

[tmatsuu]

最高だ

[nilab]

「「サイゼリヤの間違い探しが〜」と同様、局所特徴記述子のマッチングが根底にあります」

[richard_raw]

ある程度はローカルでやっていいんだ。/領域の拡張のところで振り切られた。自分はまだまだ修行が足りない……。

[rinsuki]

すごい

[ganaware]

“青枠: 平行移動を検知した領域 赤枠: それぞれの青枠内部同士で、ピクセル距離により差分が検出された箇所 紫枠: 青枠外の外側にあるオブジェクトを囲んだ部分”

[masatomo-m]

とても丁寧でありがたい

[wtatsuru]

なるほど、これはよい

[hatakazu93]

技術

[rjge]

“reg-suitのインストール都合を考えると、CIにOpenCVを導入させるよりも勝手にユーザーのブラウザでwasmとして動作する方が障壁が低い”

[kozy4324]

Webページのdiffで欲しかったやつや

[z_dogma]

ちゃんと形にできるのすごい

[securecat]

小並感しか思いつかない

[joe-re]

すごい

[sigwyg]

これ欲しかったやつ！

[itouhiro]

「既存の画像比較は同じ画像でも座標がずれるとぜんぶ差分になる。座標ずれ（平行移動）を検知する差分はOpenCV。emscriptenでwasmに移植してブラウザから実行できる。局所特徴記述子でマッチングし徐々に領域拡張」

[cheapcheer]

なんでakazeなん？siftつかわんの？ってかアフィン変換ないなら、ZNCCでいいやん

[fishpaste1214]

これで間違い探しをしたら捗りそう

[yoiIT]

画像のdiffはデザインの修正・変更点をクライアントに伝えるときや、表示検証使うと便利。

[yoshikidz]

この領域は、やっぱまだまだ来るな

[aipacommander]

おもろい

[snowcrush]

OpenCV + wasmかー、すごい。ブラウザでOpenCV使えると色々使いでありそうだ。

[cocoasynn]

すごい。画像の拡大縮小とかも対応できそうだけど需要あるんだろうか。

[anrgpjoefyu]

すごい

[side_tana]

すごい

[Nyoho]

素晴らしい

[nacika_inscatolare]

フロントと組み合わせると楽しい