e-posta imzalarında base64 olarak kodlanmış görüntüler

96

E-posta imzalarına bazı resimler (şirket logosu vb.) Eklemem gerekiyor. Söz konusu e-posta sistemi tarafından üretilen gömülü görüntüleri (genellikle ek olarak gönderilir) ve bağlantılı görüntüler olarak (alınan e-postada görüntülemek için izin gerektiren) kullanırken her türlü sorun yaşadım.

Borsadan logonun base64 görüntü temsiline sahip ve görüntülemeyi yapmak için bir etiket kullanan bazı e-postaları gördüm. Mümkünse bunu bir e-posta imzasında nasıl yapabileceğim hakkında biraz bilgi arıyorum (bir başlangıç ​​için logonun base64 sürümünü nasıl oluşturabilirim ve çalışması için hangi koda ihtiyacım var)?

Gibi basit şeyleri denedim 

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

ama aldığım tek şey alternatif metin, bu yüzden açıkça burada yanlış bir şeyler yapıyorum.

html  image  email  base64 
— Peter Nunn
kaynak
E
— postaya

Yanıtlar:

63

Önemli

Aşağıdaki cevabım, veri URI'larını kullanarak görüntülerin nasıl gömüleceğini gösterir. Bu web için kullanışlıdır, ancak çoğu e-posta istemcisi için güvenilir bir şekilde çalışmayacaktır . E-posta amacıyla Shadow2531'in cevabını okuduğunuzdan emin olun .

Temel 64 verileri bir imgetikette yasaldır ve sorunuzun böyle bir görüntü etiketinin nasıl düzgün şekilde yerleştirileceği olduğuna inanıyorum.

Temel 64 dizesini oluşturmak için çevrimiçi bir araç veya birkaç kod satırı kullanabilirsiniz.

Görüntünün satır içi verilerden kaynaklanması için sözdizimi şöyledir:

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

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

— Tim Medora
kaynak
14
Bunu denedim ama Gmail bunu desteklemiyor gibi görünüyor. Gömülü ek çözümü yine de işe yarıyor gibi görünüyor.
— Indrek
Merhaba Tim, stackoverflow.com/questions/11124540/… adresinde bazı girdiler sağlayabilirseniz çok yardımcı olur . Şimdiden teşekkürler. Başka bir şey de, yahoo, gmail gibi posta etki alanının sizin çözümünüzü desteklemesi için herhangi bir çözüm bulunmasıdır
— M Sach
1
Bence ekler (@ Shadow2531'in çözümü gibi) daha yaygın olarak desteklenen bir çözüm olabilir, ancak bilmenin tek yolu, farklı güvenlik ayarları uygulanmış birkaç büyük e-posta istemcisini test etmektir. Konuyu daha da karmaşık hale getiren şey, hem web üzerinden hem de çeşitli istemcilerde e-posta alabilmenizdir. Örneğin Gmail, Outlook veya Thunderbird içinde görüntülendiğinde web'de görüntülendiğinde farklı davranabilir.
— Tim Medora
Bu tekniği posta istemcilerinde kullanma desteği için bu bağlantıyı kontrol edin campaignmonitor.com/blog/post/3927/… (tl; biraz destek verir ancak özellikle Outlook'ta tutarsızdır)
— David Clarke
5
2016'da çoğu e-posta istemcisi için gömme hala güvenilmez mi?
— Eirik Birkeland
130

Resim, aşağıdaki gibi bir ek olarak mesaja yerleştirilmelidir:

--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

Ve HTML kısmı resme şu şekilde referans verir:

<img src="cid:0123456789">

Bazı istemcilerde src = "sig.png" de çalışacaktır.

Temel olarak, resim ekinin ilgili kısımda olduğu çok parçalı / karışık, çok parçalı / alternatif, çok parçalı / ilgili bir mesajınız olur.

Uzak olmadığı için istemciler bu resmi engellememelidir.

Veya, burada bir mbox dosyası olarak çok parçalı / alternatif, çok parçalı / ilgili bir örnek verilmiştir (Windows yeni satır biçimi olarak kaydedin ve sonuna boş bir satır koyun. Ve hiçbir uzantı veya .mbs uzantısı kullanmayın):

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

R0lGODlhKAA8AIMLAAD//wAhAABKAABrAACUAAC1AADeAAD/AGsAAP8zM///AP//
///M//////+ZAMwAACH/C05FVFNDQVBFMi4wAwGgDwAh+QQJFAALACwAAAAAKAA8
AAME+3DJSWt1Nuu9Mf+g5IzK6IXopaxn6orlKy/jMc6vQRy4GySABK+HAiaIoQdg
uUSCBAKAYTBwbgyGA2AgsGqo0wMh7K0YEuj0sUxRoAfqB1vycBN21Ki8vOofBndR
c1AKgH8ETE1lBgo7O2JaU2UFAgRoDGoAXV4PD2qYagl7Vp0JDKenfwado0QCAQOQ
DIcDBgIFVgYBAlOxswR5r1VIUbCHwH8HlQWFRLYABVOWamACCkiJAAehaX0rPZ1B
oQSg3Z04AuFqB2IMd+atLwUBtpAHqKdUtbwGM1BTOgA5YhBr374ZAxhAqRVLzA53
OwTEAjhDIZYs09aBASYq+94HfAq3cRt57sWDct2EvEsTpBMVF6sYeEpDQIFDdo62
BHwZApjEhjW94RyQTWK/FPx+Ahpg09GdOzoJ/ESx0JaOQ42e2tsiEYpCEFwAGi04
8g6gSgNOovD0gBeVjCPR2BIAkgOrmSNxPo3rbhgHZiMFPnLkBg2BAuQ2XdmlwK1Z
ooZu1sRz6xWlxd4U9GIHwOmdzFgCFKCERYNoeo2BZsPp0KY+A/OAfZDYWKJZLZBo
1mQXdlojvxNYiXrD8I+2uEvTdFJQksID0XjXiUwjJm6CzBVeBQgwBop1ZPpC8RKt
YN5RCpS6XiyMht093o8KcFFf/vKE0dCmaLeWYhQMwbeQaHLRfNk9o5Q13lQGklFQ
aMLFRLcwcN5qSWmGxS2jKQQFL9nEAgxsDEiwlAHaPPJWIfroo6FVEun0VkL4UABA
CAjUiIAFM2YQogzcoLCjC3HNsYB1aSBB5JFrZBABACH5BAkUAAsALAAAAAAoADwA
AwT7cMlJa3U2670x/6DkjKQXnleJrqnJruMxvq8xHDQbJEyC5yheAnh6MI5HYkgg
YNgGSo7BcGAMBNHNYGA7ELpZiyFBLg/DFvLArEBPHoAEgXDYChQP90IAoNYJCoGB
aACFhX8HBwoGegYAdHReijZoBXxmPWRYYQ8PZmSZZHmcnqBITp2jSgIBN5BVBFwC
BVkGAQJPiVV2rFCrCq1/sXUHAgQFAL45BncFNgSfW8wASoKBB59lhoVAnQqfDNCf
AJ05At5msHPiCeSqLwUBzF6nVnXSuIwvTDYGsXPhiMmSRUOWAC436HmZU+yGDQYF
81FhV+aevzUM3oHoZBD7W7Zs9VaUIhOn4pwE38p0srLCQCqSciBFUuBFGgEryj7E
Ojhg2yOG1hQMIMCEy4p8PB8llKmAIReiW040keUvmUygiexcwbWJwxUrzBDW+Thn
qLEB5UDUe0LxYwJmAhKk+pAqVLZE69qWGZpTQwG7ZISuw7uwzDFAXTXYYoJraKym
Q/HSASDpiiUFljbYitfYRtCF635yMRBUn4UA8aYclCw0shefW7gUgPxBKGPHA5pK
MpwsKy5AcmNZSIVHjdjI2eLwVZlK44IHQT8lkq7XTDznrAIEWMTErZwbsT/hQj1L
noXLV6YwS5eIJqIDf4tyLZB5Av1ZNrLzQSplrXVkOgxItBU1E+DCwC2xFZUME5dZ
c5AB9aw2jXkSQLhFIrj4xAx9szGWzwABdkGATwuAeEokW4wY24oK8MMViAjxxcc8
E0CUAYETIKAjAifgWGMI2ehBgVtCeleGEkYmeUYGEQAAIfkECRQACwAsAAAAACgA
PAADBPtwyUlrdTbrvTH/oOSMpBeeV4muqcmu4zG+r6EcNBskSoLnJ4VQCAw9ErzE
oxgSCBSGwYDJMRgOhIGAupFGsVEG12JAmpHicaU3QDPe6fHjoSAQDlIBY6leDIUD
dnp9C04DdXh3eAaEUTeKdwJRagUCBGdnW3JHmJh8XHNmWAeLDwCfRQIBA6MMiQMG
AgBcBgGSUgeuWQMAvb1MAgWruXAMrJYAUkU2wVGXDGZeAIxMCgVfaJhOVkB/PWeX
nXM5AnScSKR2dmZzqCwFUAKjo1l4XpLULNuwWXYHAHgWCYD15AXBgV+wEACg7sDA
A45oaLFy5ZKvXvYMEPCGYvvOwQOYAHRCQufFuU7/wp2Zo2AKCgPtwN3xR8/LLpcg
kg1khaVlQyw8GRAwlC8nvp2HeM5UR8CYxp05L8ay8YcplmLGtmniwCtKLFhJR9oR
amnAuBAiH9wK9G1kAgaxBCg5u6HdSUzp1LlNCqJAgZGBaC41Q6DAUAUfajm5ZUdK
v7z08ATjmKGWAltecaVTqE5oFisB/EIpSiH06IcKpQTa3JSVagPCWm7wZsgOwJkg
3xaTrJFkFgvtFHDywmt1J2iB2pC0C9x0yItnsLx1K8xdoQDYCcQ9I5KwaynaalUS
RnpBpYH4YiXoTipgIlIFtLSUFKwSBb/NtGCnb2Zl51fHo8hnhRZbSfCEKkgZkkcw
TgBgyVdxeQNRMNNMoMBOpBxFUSx+ObgYPgS1BBRss/jxxzwAqsbLRfwh1VJyF5WI
2AkIAIAAAiiUKMGMICDRXQIn6IiCW4Qs4NYZTByppBkbRAAAIf4ZQm95J3MgSGFw
cHkgSG9saWRheXMgUGFnZQA7

--related_boundary--

--alternative_boundary--

Bunu Sylpheed veya Thunderbird'e (İçe / Dışa Aktarma araçları uzantısı ile) veya Opera'nın yerleşik posta istemcisine aktarabilirsiniz. Daha sonra, örneğin Opera'da, HTML ve metin sürümü arasındaki farkı görmek için "düz metni tercih et" seçeneğini açıp kapatabilirsiniz. Her neyse, HTML sürümünün sigmadaki gömülü resmi kullandığını göreceksiniz.

— Gölge2531
kaynak
stackoverflow.com/questions/11124540/… adresinde bazı girdiler sağlayabilirseniz çok yardımcı olur .
— M Sach
@MSach bir şansım olduğunda bir göz atacak.
— Shadow2531
4
Bana @ Shadow2531 çok parçalı / ilgili kodun nereye gideceğini söyleyebilir misiniz? aynı HTML dosyasında mı olması gerekiyor?
— Faisal Ashfaq
1
"böyle" ... ne gibi? Faysal ile birlikteyim, bunu mesajına nasıl dahil edersin ?
— Şeytanın Avukatı
1
Tamam, bu yorum anlayışımı zedeledi. Yaptığım şey, bir HTM dosyası oluşturmak ve ardından onu görünüme yüklemek. Daha sonra yerel bir dosya seçmek için imza düzenleyicileri "görüntüyü değiştir" işlevini kullandım (manuel olarak dahil ettiğim base64 kodlu görüntü yerine). Bu demek istediğini yapıyor gibi görünüyor. Benimle olduğun için teşekkürler.
— Devil's Advocate
2

Son zamanlarda e-postaya QR resim / png eklemekle aynı sorunu yaşadım. QR görüntüsü, ZXing kullanılarak oluşturulan bir bayt dizisidir. Bir dosyaya kaydetmek / dosyadan okumak çok pahalı (yavaş) olduğundan onu bir dosyaya kaydetmek istemiyoruz. Yani yukarıdaki cevapların ikisi de benim için işe yaramıyor. İşte bu sorunu çözmek için yaptığım şey:

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");

Diyelim ki contentId "111122223333", o zaman HTML bölümünüz şuna sahip olmalıdır:

<img src="cid: 111122223333">

Bayt dizisini Base64'e dönüştürmenize gerek yoktur çünkü Commons Mail dönüşümü sizin için otomatik olarak yapar. Bu yardımcı olur umarım.

— JerryP
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.