메일로 편지를 보내고 싶었는데 세 번의 실패를 맛보고 포기하다.....
이 글에선 세 번의 실패 과정을 설명합니다..
🧐 문제 1. 사진이 안 보내짐
자꾸 사진을 포함해서 보내도 내용만 보내지고 사진은 흔적도 없이 사라짐 ..
정말 열받았다... 믿기지 않아서 200번 시험해봄
🔑 인라인 스타일로 보내자!
이 문제 해결 법은 검색하니 금방 나왔다!!
var emailContent = `
<html>
<body>
<img src="http://eunjinee.dothome.co.kr/image.jpg" style="text-align: center; width: 20%; height: 20%;">
</body>
</html>
`;<?php
$to = "이메일";
$subject = "Merry Christmas !!";
// 이메일 헤더 설정
$headers = "From: 이메일\r\n";
$headers .= "Reply-To: 이메일\r\n";
$headers .= "Content-type :text/html;charset=euc-kr \r\n";
$emailContent = $_POST['emailContent'];
// 이메일 보내기
mail($to, $subject, $emailContent, $headers);
?>
메일 본문 쓸 때 스타일 태그 안 쓰고 위 코드블럭처럼 인라인으로 스타일 넣으면 해결되는 거엿삼 ㅋ
이 밑으로 나오는 코드 기본 뼈대는 다 이렇게 js에서 메일 본문을 쓰고, php로 mail 날리는 거임
🧐 문제 2. 사진과 글씨가 분리됨
저는 왼쪽 사진처럼 편지지 위에 편지를 작성해서 보내고 싶었는데요..
메일을 보내면 저렇게 편지지랑 글이 분리돼서 보내짐 ㅜ.ㅜ ..
해결하는데 정말 오래 걸렸다 ..
애초에 문제 인식이 안 됐음 .. 내 코드가 잘못된 줄 알고 한~참 메일 보내기만 함;;;
근데 설마 ㄷㄷ 네이버에서 지원 안돼서 자동으로 분리돼 가는 건 아니겠지? ㄷㄷ 하고 검색했더니...
그렇다고 한다 .. 네이버도 같을 거라 생각 ..ㅋ
🔑 편지를 캡쳐해서 메일로 보내자 !!
그래서 아예 보내기 버튼을 누르면 element를 캡쳐하고, 그 사진을 서버에 저장한 후 서버에 저장된 사진을 메일로 보낸다면..?
이라는 생각이 들었다 !!!!
캡쳐하는 방법은 html2canvas 사용하기.
첫 번째 인수에는 캡쳐할 element, 두 번째 인수에는 함수를 적어주면 된다.
html2canvas(document.getElementById('content')).then(canvas => {
// 해상도 0.5로 낮춰 캡쳐
var imageData = canvas.toDataURL('image/jpeg', 0.5);
// JavaScript를 사용하여 서버로 전송
var xhr = new XMLHttpRequest();
xhr.open('POST', 'test.php', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
};
xhr.send('imageData=' + encodeURIComponent(imageData));
});원본으로 올리면 안 올라가길래, 해상도를 0.5배로 낮춰서 올렸다
<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
// 전송된 이미지 데이터 받기
$imageData = $_POST['imageData'];
// 데이터를 이미지 파일로 디코딩하고 저장
$imageData = str_replace('data:image/jpeg;base64,', '', $imageData);
$imageData = str_replace(' ', '+', $imageData);
$decodedImage = base64_decode($imageData);
// 파일로 저장 (image.jpg로 저장)
file_put_contents('image.jpg', $decodedImage);
echo '이미지가 성공적으로 저장되었습니다.';
} else {
echo '잘못된 요청입니다.';
}
?>그리고 base64형태로 서버에 저장한다.
이때, base64는 바이너리 코드를 아스키 코드로 변환하는 것을 말한다.
서버에 어떠한 값을 저장할때는 이렇게 저장해야만 한다!!
🧐 문제 3. 서버에 사진이 올라갔다 안 올라갔다 함
분명 웹크롬으로 확인하면서 만들 때는 잘 보내졌는데 !!! ㅜㅜ
핸드폰으로 들어가면 사진 저장이 안 되는 이슈 발생 ..
그래서 이전에 저장된 편지지가 메일로 보내지는 이슈 발생 ...
그리고 사진이 갱신되면 이전 메일의 사진도 같이 갱신되는 이슈 발생 .. ㅋ
아마 핸드폰에서 저장할 때 서버 저장 권한이 없어서 접근을 못하는 것 같다 ..
이걸 해결하려면? 너~무 허벌 서버가 될 것으로 예상되기 때문에.... 포기합니다....
네.. 진짜 어이가 없구요? 이미 이틀 동안 이걸 붙잡고 있었기에 ...
메일 보내기는 그냥 접슴니다.
그래서 결론은 메일 보내기를 포기하고
관리자만 접근할 수 있는 페이지를 추가하여 편지를 모아볼 수 있도록 바꿀 것입니다.......
'메리크리' 카테고리의 다른 글
| [메리크리] 편지쓰기 / 편지보기 (0) | 2024.01.08 |
|---|---|
| [메리크리] 오디오 재생 - 시도는 해봤다 일기, localStorage (1) | 2023.12.19 |
| [메리크리] 편지쓰기 UI (0) | 2023.12.19 |
| [메리크리] 스케줄링 UI/DB (1) | 2023.12.19 |
| [메리크리] 서버 연결 및 데이터베이스 구축 (1) | 2023.12.08 |
