電子メール署名のbase64エンコード画像


97

電子メールの署名にいくつかの画像(会社のロゴなど)を含める必要があります。問題の電子メールシステムによって生成された埋め込み画像(通常は添付ファイルとして送信されます)およびリンクされた画像(受信した電子メールに表示するための許可が必要)を使用すると、さまざまな問題が発生しました。

ロゴのbase64画像表現があり、タグを使用して表示する取引所からのメールを見たところです。可能であれば、電子メールの署名でこれを行う方法に関する情報を探しています(最初にbase64バージョンのロゴを生成するにはどうすればよいですか?それを機能させるにはどのコードが必要ですか?)

私は次のような簡単なことを試しました

<body>
<span>
<img src=.... >
</span>
</body>

しかし、私が得るのは代替テキストだけなので、明らかにここで何か間違ったことをしています。


回答:


64

重要

以下の私の答えは、データURIを使用して画像を埋め込む方法を示しています。これはWebには役立ちますが、ほとんどの電子メールクライアントでは確実に機能しません。電子メールの目的で、Shadow2531の回答を必ず読んでください


Base-64データはimgタグで合法であり、あなたの質問はそのような画像タグを適切に挿入する方法だと思います。

オンラインツールまたは数行のコードを使用して、base64文字列を生成できます。

インラインデータから画像を取得するための構文は次のとおりです。

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot">

http://en.wikipedia.org/wiki/Data_URI_scheme


14
これを試しましたが、Gmailはそれをサポートしていないようです。ただし、埋め込みアタッチメントソリューションは機能しているようです。
Indrek 2012年

こんにちはティムあなたがstackoverflow.com/questions/11124540/…でいくつかの入力を提供することができればそれは大きな助けになるでしょう。前もって感謝します。もう1つは、yahoo、gmailなどのメールドメインもソリューションをサポートするように解決策があることです
M Sach 2012年

1
添付ファイル(@ Shadow2531のソリューションなど)がより広くサポートされているソリューションかもしれないと思いますが、知る唯一の方法は、さまざまなセキュリティ設定が適用されたいくつかの主要な電子メールクライアントをテストすることです。問題をさらに複雑にしているのは、Webとさまざまなクライアントの両方で電子メールを受信できることです。たとえば、Gmailは、Webで表示した場合と、OutlookまたはThunderbirdの内部で表示した場合で動作が異なる場合があります。
ティム・メドラ

メールクライアントでこの手法を使用するためのサポートについては、このリンクを確認してくださいcampaignmonitor.com/blog/post/3927/…(tl ; dr一部のサポートはありますが、特にOutlookでは一貫性がありません)
David Clarke

6
2016年のほとんどの電子メールクライアントにとって、埋め込みはまだ信頼できませんか?
Eirik Birkeland 2016年

130

画像は、次のような添付ファイルとしてメッセージに埋め込む必要があります。

--boundary
Content-Type: image/png; name="sig.png"
Content-Disposition: inline; filename="sig.png"
Content-Transfer-Encoding: base64
Content-ID: <0123456789>
Content-Location: sig.png

base64 data

--boundary

そして、HTML部分は次のように画像を参照します。

<img src="cid:0123456789">

一部のクライアントでは、src = "sig.png"も機能します。

基本的に、画像の添付ファイルが関連部分にある、マルチパート/混合、マルチパート/代替、マルチパート/関連メッセージがあります。

このイメージはリモートではないため、クライアントはこのイメージをブロックしないでください。

または、mboxファイルとしてのマルチパート/代替、マルチパート/関連の例を次に示します(Windowsの改行形式として保存し、末尾に空白行を配置します。拡張子や.mbs拡張子は使用しないでください)。

From 
From: from@example.com
To: to@example.com
Subject: HTML Messages with Embedded Pic in Signature
MIME-Version: 1.0
Content-Type: multipart/alternative; boundary="alternative_boundary"

This is a message with multiple parts in MIME format.

--alternative_boundary
Content-Type: text/plain; charset="utf-8"
Content-Transfer-Encoding: 8bit

test

-- 
[Picture of a Christmas Tree]

--alternative_boundary
Content-Type: multipart/related; boundary="related_boundary"

--related_boundary
Content-Type: text/html; charset="utf-8"
Content-Transfer-Encoding: 8bit

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <p>test</p>
        <p class="sig">-- <br><img src="cid:0123456789"></p>
    </body>
</html>

--related_boundary
Content-Type: image/png; name="sig.png"
Content-Disposition: inline; filename="sig.png"
Content-Location: sig.png
Content-ID: <0123456789>
Content-Transfer-Encoding: base64

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
cHkgSG9saWRheXMgUGFnZQA7

--related_boundary--

--alternative_boundary--

これをSylpheedまたはThunderbird(インポート/エクスポートツール拡張機能を使用)またはOperaの組み込みメールクライアントにインポートできます。次に、たとえばOperaでは、「プレーンテキストを優先する」を切り替えて、HTMLバージョンとテキストバージョンの違いを確認できます。とにかく、HTMLバージョンがsigに埋め込まれた写真を利用していることがわかります。


stackoverflow.com/questions/11124540/…でいくつかの入力を提供できれば非常に役立ちます。
M Sach 2012年

@MSach機会があれば見ていきます。
shadow2531 2012年

4
マルチパート/関連コードがどこに行くのか@ Shadow2531を教えてもらえますか?同じHTMLファイルにあるはずですか?
ファイサルアシュファク

1
「このように」...何のように?私はファイサルと一緒です、どうやってこれをあなたのメッセージに取り入れますか?
悪魔の代弁者2016

1
さて、そのコメントは私の理解を傷つけました。私が行ったことは、HTMファイルを作成し、それをOutlookにロードすることです。次に、署名エディターの「画像の置換」機能を使用して、ローカルファイルを選択しました(手動で含めたbase64でエンコードされた画像の代わりに)。これはあなたが言っていることをしているようです。私に固執してくれてありがとう。
悪魔の提唱

2

最近、QR画像/ pngをメールに含めるのと同じ問題が発生しました。QR画像は、ZXingを使用して生成されたバイト配列です。ファイルからの保存/読み取りはコストがかかりすぎる(遅い)ため、ファイルに保存したくありません。したがって、上記の両方の答えは私にはうまくいきません。この問題を解決するために私がしたことは次のとおりです。

import javax.mail.util.ByteArrayDataSource;
import org.apache.commons.mail.ImageHtmlEmail;
...
ImageHtmlEmail email = new ImageHtmlEmail();
byte[] qrImageBytes = createQRCode(); // get your image byte array
ByteArrayDataSource qrImageDataSource = new ByteArrayDataSource(qrImageBytes, "image/png");
String contentId = email.embed(qrImageDataSource, "QR Image");

contentIdが「111122223333」であるとすると、HTMLパーツには次のようになります。

<img src="cid: 111122223333">

Commons Mailが自動的に変換を行うため、バイト配列をBase64に変換する必要はありません。お役に立てれば。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.