LoginSignup
6
1

「PNG にテキストを埋め込む」
https://qiita.com/nanbuwks/items/969642abde48bb272c25

では、png に drawio のソースが埋め込まれていることを示しました。

「PNG Specification: Chunk Specifications」
https://www.w3.org/TR/PNG-Chunks.html
の説明では、tExt チャンクにはキーワードがついていて、そのキーワードについては以下のようにあります。

The keyword indicates the type of information represented by the text string. The following keywords are predefined and should be used where appropriate:

   Title            Short (one line) title or caption for image
   Author           Name of image's creator
   Description      Description of image (possibly long)
   Copyright        Copyright notice
   Creation Time    Time of original image creation
   Software         Software used to create the image
   Disclaimer       Legal disclaimer
   Warning          Warning of nature of content
   Source           Device used to create the image
   Comment          Miscellaneous comment; conversion from
                    GIF comment
For the Creation Time keyword, the date format defined in section 5.2.14 of RFC 1123 is suggested, but not required [RFC-1123]. Decoders should allow for free-format text associated with this or any other keyword.
Other keywords may be invented for other purposes. Keywords of general interest can be registered with the maintainers of the PNG specification. However, it is also permitted to use private unregistered keywords. (Private keywords should be reasonably self-explanatory, in order to minimize the chance that the same keyword will be used for incompatible purposes by different people.)

drawio の埋め込みでは、規定のキーワードではないmxfile キーワードが使われているようです。

image.png

ここでは、独自に Embedded Source キーワードを作ってしまいます。

Embedded Source フォーマット

以下のようにしてフォーマットを規定します

種別 長さ(Byte) 内容
キーワード 15 Embedded Source
セパレータ 1 NULL文字
コンテンツ 可変 JSONデータ

JSONデータの内訳は以下のようになっています。

キー データ
type ファイルタイプを示す文字列
filename ファイル名(パス無)
file 元ファイルをBASE64エンコードした文字列

type は現在ファイル名の拡張子を入れています。
file の BASE64エンコードは RFC2045 (MIME) に基づいた76バイトごとに改行されたものとなります。
この他に mimetype が入る予定です。

Drawファイルを作る

以下のようなDrawファイルを作ります。

image.png

ここから、先の規定に基づいて png を作る拡張を作りました。(開発中です。)
image.png

現在は、ヘルパーを実行する必要がありますが、ヘルパーを実行するとファイルが表示されるので、
image.png

これを Qiita に貼ります。

このようにして貼った png ファイルです。

embeddedpng.png

この png ファイルを書き直したいな!

これをダウンロードします。

開発中ですが、ヘルパーアプリを実行すると、アプリが開き、再現します。
image.png

再編集ができます。
image.png

開発中のヘルパーアプリはその2以降で解説します。

6
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
1