[html] 이메일 서명의 base64 인코딩 이미지

Program / 글쓴이

이메일 서명에 일부 이미지 (회사 로고 등)를 포함해야합니다. 나는 문제의 이메일 시스템에서 생성 된 포함 된 이미지 (일반적으로 첨부 파일로 전송 됨)와 연결된 이미지 (받은 이메일에 표시 할 권한이 필요함)를 사용하여 모든 종류의 문제를 겪었습니다.

로고의 base64 이미지 표현이 있고 태그를 사용하여 표시하는 일부 이메일을 교환에서 보았습니다. 가능한 경우 이메일 서명에서이 작업을 수행 할 수있는 방법에 대한 정보를 찾고 있습니다 (시작을 위해 로고의 base64 버전을 어떻게 생성하고 작동하려면 어떤 코드가 필요합니까?)?

나는 다음과 같은 간단한 것을 시도했다. 

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

하지만 내가 얻는 것은 대체 텍스트뿐이므로 분명히 여기서 뭔가 잘못하고 있습니다.

답변

중대한

아래 내 대답은 데이터 URI를 사용하여 이미지를 삽입하는 방법을 보여줍니다. 이것은 웹에서는 유용하지만 대부분의 이메일 클라이언트에서는 안정적으로 작동하지 않습니다 . 이메일 목적 으로 Shadow2531의 답변을 읽으십시오 .

Base-64 데이터는 img태그 에서 합법적이며 귀하의 질문은 그러한 이미지 태그를 올바르게 삽입하는 방법이라고 생각합니다.

온라인 도구 또는 몇 줄의 코드를 사용하여 기본 64 문자열을 생성 할 수 있습니다.

인라인 데이터에서 이미지를 가져 오는 구문은 다음과 같습니다.

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

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

답변

이미지는 다음과 같은 첨부 파일로 메시지에 포함되어야합니다.

--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”도 작동합니다.

기본적으로 이미지 첨부 파일이 관련 부분에있는 multipart / mixed, multipart / alternative, multipart / related 메시지가 있습니다.

원격이 아니므로 클라이언트도이 이미지를 차단해서는 안됩니다.

또는, 여기에 mbox 파일로 multipart / alternative, multipart / 관련 예제가 있습니다.

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에 포함 된 그림을 사용하는 것을 볼 수 있습니다.

답변

최근에 이메일에 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로 변환 할 필요가 없습니다. 도움이 되었기를 바랍니다.

답변