実装した時の覚え書きです。
目的
- Contactform7を使用した診断テストを兼ねたメールフォーム
- Chart.jsで診断結果をcanvasに描画している
- canvasに描画した結果の画像をメールに添付して送れるようにしたい
以下の2パターンを試し、1番を採用。
- base64形式に変換し、非表示のinputに格納する
- canvas画像をユーザーのローカルに保存させるボタンと添付ファイル用のinputを用意する(ユーザーの手間が多い…)
- 動作確認:WordPress 6.5.3
描画した画像をbase64形式に変換し、非表示のinputに格納する
const canvas = chart.canvas;
// 格納したいinput要素のID
const imgInput = document.getElementById('result-img');
const dataUrl = canvas.toDataURL('image/png');
imgInput.value = dataUrl;
困ったこと:メールでbase64画像を途中までしか送れない
[hidden result-img id:result-img]
コンソールで確認してもflamingoで確認しても画像データは格納できているのにメールで半分くらいで画像がちぎれて送られてしまった。
容量制限にしては画像は軽いので悩んだが、input typeをhiddenからtextareaにしたことで解決した(Contactform7のhiddenに文字数制限がある?)。
[textarea result-img id:result-img]
困ったこと:safariでinputにdisplay:noneが効かない
inputにCSSを当ててもsafariでどうしても表示が崩れる。
display:noneにしたはずの画像格納用inputが丸出しになってしまい最悪なので、
<span style="display:none">[textarea result-img id:result-img]</span>
親要素(span)にdisplay:noneを当てて解決しました。
メールでbase64画像を表示させる
- HTMLメールを有効にする
- 本文の画像を表示したい箇所で
<img src="[result-img]">
- 添付ファイルにも
[result-img]
flamingoには画像がテキストで保管される
コンタクトフォーム7のログを残すプラグインflamingoのデータには、添付ファイルとして画像を送った場合と違ってbase64だとデコードされたテキストで保管されます。
ブラウザのURL欄にこのテキストを貼り付けると画像を見ることができます。
コメント