【Javascript】Canvasに何かしら描画されているかどうか判定する方法を考えてみた

Javascript, 開発

おはようございます。

何故か昨日も東京はあまり雨が降りませんでしたね。
嵐の前の静けさなのだろうか。

九州は災害級の大雨だそうで、心配ですね。被害が少なく済めばいいのですが。。

本題となりますが、
昨日に引き続き Canvas 関連の話し。

SignaturePad では、Canvasにサインが書かれているかどうかを isEmpty 関数にて簡単に判定できるようになっていますが、
Canvas 単体で判定する方法についてはなかなか見つかりませんでしたので、判定する方法を考えてみました。

プログラムは前回のものを流用します。

【Javascript】SignaturePad を使ってブラウザ上でサインを書けるようにする

スポンサーリンク

画面の修正

sampleSign.html

プログラムの修正

script/sampleSign.js

起動してみる

初期表示
初期表示

初期表示画面です。何も描かずに「データチェック」ボタンをクリックします。

 

データチェックボタンクリック
データチェックボタンクリック

何も描かれていない判定となりました。

描いてからボタンクリック
描いてからボタンクリック

続いて文字を描いてから「データチェック」ボタンをクリックしたところ、ちゃんと描かれている判定がされました。

まとめ

Canvasを表示した際にCanvas内のRGBA情報を集計・保持しておいて、
データチェックボタンがクリックされた際の集計値と比較する方法で判定をしました。

背景色を設定した場合もしっかりRGBA情報が設定されるため初期状態との比較をしましたが、
そもそも背景色を設定しない場合はデータチェックボタンがクリックされた際に、RGBAの集計値が 0でなければ何かしら描いてある判定ができそうです。

何かのお役に立てれば。

ではでは。

 

スポンサーリンク


関連するコンテンツ

Javascript, 開発Javascript

Posted by doradora