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


95

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

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

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

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

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


답변:


63

중대한

아래 내 대답은 데이터 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


14
이것을 시도했지만 Gmail이 지원하지 않는 것 같습니다. 내장형 부착 ​​솔루션은 작동하는 것 같습니다.
Indrek

Tim 안녕하세요 . stackoverflow.com/questions/11124540/…에 몇 가지 정보를 제공 할 수 있다면 큰 도움이 될 것 입니다. 미리 감사드립니다. 또 다른 한가지는 야후와 같은 그 메일 도메인은 Gmail은 또한 솔루션 지원하므로 모든 해상도가
M 사치

1
첨부 파일 (예 : @ Shadow2531의 솔루션)이 더 광범위하게 지원되는 솔루션 일 수 있지만 알 수있는 유일한 방법은 다른 보안 설정이 적용된 여러 주요 이메일 클라이언트를 테스트하는 것입니다. 문제를 더욱 복잡하게 만드는 것은 웹과 다양한 클라이언트 모두에서 이메일을받을 수 있다는 것입니다. 예를 들어 Gmail은 웹에서 볼 때와 Outlook 또는 Thunderbird 내부에서 볼 때 다르게 작동 할 수 있습니다.
Tim Medora

메일 클라이언트에서이 기술을 사용하기위한 지원이 링크를 확인 campaignmonitor.com/blog/post/3927/... (TL을, 특히 Outlook에서 박사 일부 지원하지만, 일관성)
데이비드 클라크

5
2016 년 대부분의 이메일 클라이언트에서 여전히 포함을 신뢰할 수 없습니까?
에이 릭 Birkeland의

129

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

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


stackoverflow.com/questions/11124540/…에 몇 가지 입력을 제공 할 수 있다면 큰 도움이 될 것 입니다.
M Sach

@MSach 내가 기회가되면 살펴볼 것입니다.
Shadow2531

4
@ Shadow2531 멀티 파트 / 관련 코드가 어디로 갈지 알려주시겠습니까? 동일한 HTML 파일에 있어야합니까?
Faisal Ashfaq 2014 년

1
"이렇게"... 뭐라고? 파이살과 함께 있는데 어떻게 메시지에 넣을 까요?
Devil 's Advocate

1
좋아요, 그 댓글은 제 이해를 방해했습니다. 내가 한 일은 HTM 파일을 만든 다음 Outlook에로드하는 것입니다. 그런 다음 서명 편집기 "이미지 교체"기능을 사용하여 로컬 파일을 선택했습니다 (수동으로 포함시킨 base64 인코딩 이미지 대신). 이것은 당신이 의미하는 바를 수행하는 것 같습니다. 함께 해주셔서 감사합니다.
Devil 's Advocate

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.