WEBでテキストを抜き取られないモザイク処理ツール #2「テキストの一部をボカし表示できるCanvasツール」

モザイクツールを作ろうと思って、githubリポジトリを立ち上げてみたんですが、 少し機能多めのツールに仕上がってしまいました。 もはやモザイク以外でも使えるの、今後もう少し改良すると、かなりいい感じのツールになりそうです。 ということで、ツール紹介をします。

Github

MYNT Canvas Text

https://github.com/yugeta/mynt_canvas_text 簡単なREADMEを書いているので、そちらも参照してみてください。 とりあえず、GithubPagesで、デモも用意しています。 https://yugeta.github.io/mynt_canvas_text/demo/ 文字だけで見た目は面白くないのですが、 ボカしを入れている部分は、HTMLタグのような感覚でテキストを構築できるようにしているので、非常にいい感じに設定できるはずです。

設定方法サンプル

ホームページ内のJavascriptで、次のように今回のモジュールを読み込みます。 import { Canvas } from "../src/canvas.js" 次に、インスタンス起動でオプションをセットしてあげるだけです。 new Canvas({ text : `あいうえお かきくけこ さしすせそ たちつてと なにぬねの`, selector : `#canvas`, text_color : `blue`, padding : 20, font_size : 16, height : "auto", font_family : `"Noto Sans JP", sans-serif`, font_weight : "", font_style : "", })

パラメータ

text : 表示するテキストを登録 selector : canvasタグまたは、canvasを設置するエレメントの場所 text_color : テキスト色 padding : canvasの縁のpadding値（数値） font_size : フォントサイズ height : canvasの表示サイズ（オーバーする文字は...３点リーダー表示、"auto"にすると、 文字サイズにフィットします） font_family : フォント指定（cssで読み込んだフォントも使用できます） font_weight : "bold"などの指定 font_style : "italic"などの指定

デモ

※パソコンでみてる人は、ブラウザサイズを小さくすると、文字が改行wrapされるのが確認できます。

あとがき

改行処理と、タグ機能をつけるのに、かなりのパワーを使い、今時点で、自分が骨と皮だけの抜け殻のように燃え尽きました。 でも、なかなかいい出来に満足しています。 ちなみに、まだこの段階では、textを平文で登録しているので、セキュア対応できていません。 もう一回分ぐらいのブログ記事ができそうですね。 ※この記事がアップされている時に、Githubでは対応できていると思うので、待ちきれない人はそちらで確認してください。 あと、バグや不具合、機能追加要望、使い方がわからない質問などは、お問い合わせフォームにてお伝えください。