HTML5キャンバスからテキストをレンダーする

Question

私のウェブサイトには、組織階層を描画するキャンバスがあります。

人物の画像を含むthe name, email, departmentなどが含まれています。私はセレンを使用して自動化テストを実行しており、キャンバスからテキストデータを取得できるかどうかを確認したいと考えています。

私はテキストとしてキャンバスにそのデータを取得する方法はありますか？

私はその部分を画像としてスライスすると、JS libraryがあり、その画像からテキストを得ることができます。

この問題についてお手伝いできますか？
ご協力いただき誠にありがとうございます。
よろしくお願いいたします。

Answer 1

キャンバス上の要素がレンダリングされると、それらはベクトル画像になります。画像の作成に使用した要素にはオブジェクト認識が存在しないため、使用したテキストはイメージに格納されません。

ただし、イメージの位置と特性をプログラミングオブジェクトにリンクするのと同じ方法で、テキスト情報をデータ構造に保存し、同時にキャンバスイメージに取り込むことができます。

つまり、キャンバスに名前、電子メール、部門データを取り込むためにデータベース情報を取得する場合、その情報をデータ構造に保存するだけでなく、キャンバスイメージに描画することもできます。

次に、そのオブジェクトに格納されている値を取得するだけで、そのトリックが実行されます。

Answer 2

キャンバスで何が起こるかは、キャンバスにとどまります。キャンバスはビットマップなので、描画されたテキストはラスタライズされてから忘れられます。この時点以降にテキストを抽出する唯一の方法は、OCRを使用することです（信頼してください、実際のコードよりも修正アルゴリズムを書く時間が長くなります）。しかし、あなたがマゾヒズムを感じるなら、いくつかの選択肢が存在します：Ocrad、Tesseract。

ただし、私のお勧めは：常にソースに行く！元のテキストソース（最初にキャンバスに描画するために使用）にアクセスできる場合は、その代わりに使用します。