Contactform7でcanvasに描画した画像を送信する

本ページはプロモーションが含まれています。

技術

実装した時の覚え書きです。

スポンサーリンク

目的

  • Contactform7を使用した診断テストを兼ねたメールフォーム
  • Chart.jsで診断結果をcanvasに描画している
  • canvasに描画した結果の画像をメールに添付して送れるようにしたい

以下の2パターンを試し、1番を採用。

  1. base64形式に変換し、非表示のinputに格納する
  2. 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欄にこのテキストを貼り付けると画像を見ることができます。

スポンサーリンク
スポンサーリンク
技術
スポンサーリンク
この記事を書いた人
いちじく

20代前半で一度はあきらめた海外留学・移住の夢を叶えるために、台湾ワーキングホリデー、ギリホリを目指してリモートワークでの安定収入を目指しています。

いちじくをフォローする

コメント

タイトルとURLをコピーしました