รูปภาพที่เข้ารหัส base64 ในลายเซ็นอีเมล


95

ฉันต้องใส่รูปภาพ (โลโก้ บริษัท ฯลฯ ) ในลายเซ็นอีเมล ฉันมีปัญหาทุกประเภทโดยใช้รูปภาพฝังตัวที่สร้างโดยระบบอีเมลที่เป็นปัญหา (โดยทั่วไปจะส่งเป็นไฟล์แนบ) และเป็นรูปภาพที่เชื่อมโยง (ต้องได้รับอนุญาตให้แสดงในอีเมลที่ได้รับ)

ฉันเพิ่งเห็นอีเมลบางฉบับจาก exchange ที่มีการแสดงภาพโลโก้ 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

Hi Tim มันจะเป็นความช่วยเหลือที่ดีหากคุณสามารถให้ปัจจัยการผลิตบางอย่างเกี่ยวกับstackoverflow.com/questions/11124540/... ขอบคุณล่วงหน้า. อีกอย่างคือมีวิธีแก้ปัญหาเพื่อให้โดเมนเมลเช่น yahoo, gmail รองรับโซลูชันของคุณด้วย
M Sach

1
ฉันคิดว่าไฟล์แนบ (เช่นโซลูชันของ @ Shadow2531) อาจเป็นโซลูชันที่ได้รับการสนับสนุนอย่างกว้างขวาง แต่วิธีเดียวที่จะทราบคือทดสอบไคลเอนต์อีเมลรายใหญ่หลายตัวโดยใช้การตั้งค่าความปลอดภัยที่แตกต่างกัน เรื่องที่ซับซ้อนมากขึ้นคือคุณสามารถรับอีเมลได้ทั้งทางเว็บและจากลูกค้าหลายราย ตัวอย่างเช่น Gmail อาจทำงานแตกต่างกันเมื่อดูบนเว็บเทียบกับภายใน Outlook หรือ Thunderbird
Tim Medora

ตรวจสอบลิงค์นี้เพื่อรับการสนับสนุนสำหรับการใช้เทคนิคนี้ในไคลเอนต์อีเมลcampaignmonitor.com/blog/post/3927/… (tl; dr สนับสนุนบางอย่าง แต่ไม่สอดคล้องกันโดยเฉพาะใน Outlook)
David Clarke

5
การฝังยังไม่น่าเชื่อถือสำหรับโปรแกรมรับส่งเมลส่วนใหญ่ในปี 2559
Eirik 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" จะใช้ได้เช่นกัน

โดยทั่วไปคุณจะมีข้อความหลายส่วน / ผสมหลายส่วน / ทางเลือกหลายส่วน / ที่เกี่ยวข้องโดยที่ไฟล์แนบรูปภาพอยู่ในส่วนที่เกี่ยวข้อง

ไคลเอ็นต์ไม่ควรบล็อกรูปภาพนี้เนื่องจากไม่ใช่ระยะไกล

หรือนี่คือตัวอย่างหลายส่วน / ทางเลือกหลายส่วน / ที่เกี่ยวข้องเป็นไฟล์ mbox (บันทึกเป็นรูปแบบ windows newline และใส่บรรทัดว่างที่ท้ายและไม่ใช้นามสกุลหรือนามสกุล. 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 ใช้ประโยชน์จากรูปที่ฝังอยู่ในซิก


มันจะเป็นความช่วยเหลือที่ดีหากคุณสามารถให้ปัจจัยการผลิตบางอย่างเกี่ยวกับstackoverflow.com/questions/11124540/...
M Sach

@MSach จะดูเมื่อมีโอกาส
Shadow2531

4
บอกได้ไหมว่า @ Shadow2531 รหัสหลายส่วน / ที่เกี่ยวข้องจะไปที่ใด มันควรจะอยู่ในไฟล์ HTML เดียวกันหรือไม่?
Faisal Ashfaq

1
"like this" ... ชอบอะไร? ฉันอยู่กับ Faisal คุณจะนำสิ่งนี้เข้าสู่ข้อความของคุณได้อย่างไร?
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">

ไม่จำเป็นต้องแปลงอาร์เรย์ไบต์เป็น Base64 เนื่องจาก Commons Mail ทำการแปลงให้คุณโดยอัตโนมัติ หวังว่านี่จะช่วยได้

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.