メインコンテンツへスキップ
見出し画像

【配布】お手軽で高機能な電子透かし刻印アプリ作りました ~簡単操作で連続処理も~

    こんにちはRcatです。
    今回は以下の記事で紹介したPythonモジュールを、プログラミングなしで誰でも簡単に使えるようにWebアプリにしましたので紹介します。

    クイックな透かしはこちら


    はじめに

    利用規約

    情報や作品の活用時は事前に利用規約をご確認ください。

    https://note.com/rcat999/n/nb6a601a36ef5

    コメントについて

    利用規約のガイドラインを確認の上コメントしてください

    本記事に載せているイラストは生成AIにてローカルで描いたものです。


    概要

    前回のおさらいですが、電子透かしとは画像に薄く刻印された文字列やマークなどの事です。
    画像検索をするとたまに"Sample"と刻印してあるのがよくありますよね。アレです。
    主に著作権保護の手段ですね。これがついていれば、相手がこれが自分の画像であると主張しづらくなります。と言うか主張する時点でアウトなんですけどね。
    というわけで、この電子透かしを簡単に、そして複数の画像に一気に書き込む高機能アプリを作ったのでの紹介します。


    機能と使い方

    まず、最初に使い方を説明しながらどんな機能があるのか解説していきます。
    なお、細かい実行結果については、以下の記事の方が詳しく説明していますので、並行でご確認ください。

    起動と画像の読み込み

    ツールを起動するとメイン画面が開きます。詳細な起動方法についてはこの後解説します。
    真ん中の部分をクリックしてファイルを選択します。
    パソコンの場合は追加で、ドラッグアンドドロップで画像を選択するか、CTRL+Vでコピーされている画像を貼り付けできます。

    画像

    画像をアップロードすると、以下のように操作が可能になります。
    順番に解説していきます。

    画像

    モード設定

    最初に透かしの刻印方法を指定します。
    本作は4つのモードが存在します。

    画像
    • テキスト
      通常のテキスト刻印モードです。

    • テキストパターン
      画像一面にテキストを刻印します。

    • 画像
      手書きのサインなどの画像を透かしとして刻印することができます。

    • 画像パターン
      画像を並べて表示することができます。

    画像の大きさに応じて、特に画像と画像パターンが少々処理が重いです。
    例えば以下がテキストパターンの例です。

    画像
    Stable Diffusionで描いたなかよしまい

    位置とサイズ

    透かしを、どのくらいの大きさでどこに刻印するのか設定することができます。
    位置はパーセント指定です。
    100%未満の場合は左または上からの距離で指定されます。マイナスで指定すると右または下からの指定となります。
    100%以上に設定すると画像中央に設定されます。
    位置の設定に関してはパターンでは無視されます。

    サイズは3つの計算方法の中から選び、それに対してのパーセンテージで設定します。計算方法は画像の高さ、幅、面積から選びます。
    縦横比が変わってもある程度応用が効くので面積がおすすめです。

    画像

    例えば横方向を100(つまり中央)高さ方向を-5(つまり下から5%)に設定すると以下のようになります。
    ※わかりやすいように色も変えています。

    画像

    回転及び透過

    テキストを回転させるには回転に角度を入力します。
    透かしの透明度を設定するには透過のところを設定します。パーセンテージで、数値が大きいほど透明になります。

    画像
    画像

    テキストの設定

    テキストモードの場合は、書き込むテキストを編集することができます。
    書き込みたい文字列と使用するフォントを選択します。
    色はRGB表記です。
    左から順に赤緑青の光の三原色の強さを0から255までの数値で設定します。

    画像
    この場合、色は黄色
    画像

    ゆらぎの設定

    ゆらぎとは設定に幅を持たせてランダムな出力を得る方法です。
    例えば全く同じ透かしの画像を100枚重ねてしまえば、簡単に透かしの情報を抽出できてしまうと思いませんか?
    そういったことを防ぐために大きさや位置、透明度などをばらつかせることをができる機能です。

    画像

    例えば4回実行した結果が以下の通りです。
    設定は何も変えていないのに出力が変化しています。

    画像

    画像を刻印する

    画像を刻印するにはモードを画像に変更します。
    そうするとテキストの設定の部分か画像の設定という項目に変わるので、刻印したいファイルをアップロードしてください。

    画像

    このような感じでrcat手書きのにゃんこが刻印されました。

    画像

    パターンの設定

    テキストと画像にはそれぞれパターンが存在します。
    この機能を使うことで、画像一面に刻印を行うことができます。
    パターンの場合の固有設定は間隔です。
    テキストおよび画像のサイズを基準に何パーセントの隙間を空けるかを設定できます。テキストの場合は横長になりがちなので、X方向の設定には注意した方が良いです。

    画像

    ダウンロード及びコピー

    刻印の設定が完了したら画像を保存しましょう。
    メニューボタンを押してダウンロードを押すことで画像を保存できます。
    また、パソコンの場合はコピーボタンを押すことでクリップボードにコピーし、クイックに作業で使うことができます。

    連続処理

    本作は複数の画像を連続で処理する機能があります。1枚1枚ちまちまやるなんて面倒なことは考えていません。

    やり方は簡単。最初に画像をアップロードする時にまとめて選択してアップロードするだけです。
    こんな感じでまとめて選択してドラッグ&ドロップして

    画像

    読み込まれると代表で1枚だけプレビューされるので刻印の設定をします。

    画像

    ダウンロードボタンを押すと、全ての画像がダウンロードされます。
    ※コピーボタンでは最初の1枚しかコピーできません。

    画像

    ダウンロードした結果はこんな感じ。
    簡単にまとめて処理することができました。ゆらぎの設定を入れているので、少しずつ刻印が違っているのもいいですね。

    画像
    なかよしまいs

    設定の保存

    本作は結構設定が多いので、毎回リセットされるとめんどくさいですよね。
    そのため、現在の設定状態を保存する機能を設けてあります。メニューから設定を保存ボタンを押せば保存することができます。

    画像

    一度保存すると、次回起動時はその設定が読み込まれます。
    なお、設定は各自のブラウザにキャッシュとして保存されるので、違うパソコンやスマートフォンでアクセスしたり、キャッシュを削除したりすると消えてしまうのでご注意ください。

    終了

    メニューから終了ボタンを押すことで終了できます。
    Xボタンで画面を閉じても大丈夫ですが、Webサーバーを別のパソコンで起動するなど高度な利用方法を考えている場合は、このボタンを押さないとアップロードした画像がサーバーにしばらく残り続けます。
    画面だけでなくツールも終了する場合は最初に起動する黒い画面も閉じてください。
    なお、アップロードした画像の有効期限は30分です。全ての処理は30分以内に終わらせるようにしてください。


    事前準備

    さて、順番が前後しましたが、本ツールを使うための準備を説明します。

    Pythonのインストール

    本作はPythonでできています。
    そのため、まずはPythonのインストールが必要です。
    インストール方法については以下の記事で解説していますので、参考にしてください。

    配布内容の確認と環境構築

    本作は全自動環境構築対応です。上記のPythonのインストールさえすれば依存ライブラリなどは自動的にインストールできます。

    まず、配布状態でのパッケージ内容は以下のようになります。
    この状態ではデータが足りないため起動できません。

    画像

    本作を起動するには、以下の記事で配布している"Watermark2"が必要です。
    こちらの方からモジュールをダウンロードし、本作のフォルダにコピーしてください。

    以下のようなフォルダ構成になっていれば起動することができます。

    画像

    ツールを起動するにはStart.batという名前の歯車のアイコンのファイルをダブルクリックしてください。
    自動的に環境構築が行われ、正常に完了した場合そのままツールが起動します。


    フォントの追加(Windowsの場合)

    初期では3つのフォントに対応していますが、テキストモードで他のフォントを使いたい場合は手動で追加する必要があります。

    Windowsの場合はC:\Windows\Fontsの中にフォントがあるので、以下の手順でフォントの場所を取得してください。

    画像

    場所が確認できたら、fonts.jsonを開いて編集します。

    画像

    開くと以下のようになっており、左側に名前、右側に場所です。
    ここに書式に則って自由に追加することができます。
    気をつけなければならないのが"\"は2連続で書かないといけないというとこです。あとは一番下の行だけは最後のカンマがないことに気をつけてください。

    画像

    ツールを再起動するとフォントが読み込まれます。
    Windows以外のフォントは各自ダウンロードしてパスを直接指定すれば使えるはずです。


    サーバーとして運用する

    工事中
    理論上Linuxでも動くのでsystemdにでも入れて自宅でいつでも使える感じにする内容を予定。


    配布情報

    URL

    以下のURLより配布しています。
    利用規約に同意の上ご利用ください。

    https://script.google.com/macros/s/AKfycbxdcr8pnazR7RbjaSICTtaNWfN7h_rjQrKlZ3h9CZpPRFzRILk1OGc8mZqKbF-NXNO9/exec?name=お手軽電子透かし刻印_WEB_UI

    内容は上で紹介している通りです。

    事前準備のところでも説明していますが、本作を起動するには参照している記事の方で配布しているモジュールが必要です。

     
     
    モノづくりが趣味。 "売ってないなら自分で作ればいいじゃない"をコンセプトに、機械/電気/AI/プログラム/ネットワーク 全部やります。 記事執筆はAI不使用。 ご連絡や利用規約はプロフィール記事参照。

    あなたへのおすすめ