動的に生成したimgをメールフォームの送信内容に追加したい

動的に生成したimg要素をメールフォームの送信内容に追加したい

＜希望の処理＞
①(js)canvasタグに描いた内容のimg要素を生成
→完了
②(js)送信ボタン押下でform内にinput要素を追加
→完了(typeをfileにしているので必要に応じて要変更)
③(?)追加したinput要素と生成したimg要素を紐付ける
→未了
④(PHP)メールフォームにimg要素と紐づいたinputを追加し、送信する
→未了(img以外は送信動作確認済み)

＜不明点＞
・②のinput要素のtypeを何にすべきか
・③imgとinputの紐付け方
・送信メールにimgを追加する方法

その他必要な情報がありましたら何なりと！
よろしくお願いいたします！

＜追記(参考にしたサイト)＞
・javascript
https://teratail.com/questions/11714(orange0190さんの回答)
・PHP
https://codeforfun.jp/php-contact-form/

php
1<?php
2if ($_SERVER['REQUEST_METHOD'] != 'POST') {
3  // POSTでのアクセスでない場合
4  $name = '';
5  $ruby = '';
6  $image = '';
7  $message = '';
8  $err_msg = '';
9  $complete_msg = '';
10
11} else {
12  // フォームがサブミットされた場合（POST処理）
13  // 入力された値を取得する
14  $name = $_POST['name'];
15  $ruby = $_POST['ruby'];
16  $image = $_POST['image'];
17  $message = $_POST['message'];
18
19  // エラーメッセージ・完了メッセージの用意
20  $err_msg = '';
21  $complete_msg = '';
22
23  // 空チェック
24  if ($name == '' || $ruby == '') {
25    $err_msg = '全ての項目を入力してください。';
26  }
27
28  // エラーなし（全ての項目が入力されている）
29  if ($err_msg == '') {
30    $to = 'example@xxx.com'; // 管理者のメールアドレスなど送信先を指定
31    $headers = "From: " . $ruby . "\r\n";
32
33    // 本文の最後に名前を追加
34    $message .= "\r\n\r\n" . $name;
35
36    // メール送信
37    mb_send_mail($to, $message, $body, $headers);
38
39    // 完了メッセージ
40    $complete_msg = '送信されました！';
41
42    // 全てクリア
43    $name = '';
44    $ruby = '';
45  }
46}
47?>
48<!DOCTYPE html>
49<html>
50<head>
51	<meta charset="UTF-8"/>
52	<meta name="description" content="">
53	<meta http-equiv="X-UA-Compatible" content="IE=edge">
54	<title></title>
55	<link href="css/reset.css" rel="stylesheet">
56	<link href="css/sign.css" rel="stylesheet">
57  <link href="css/canvas.css" rel="stylesheet">
58</head>
59<body onload="mam_draw_init();">
60<section>
61	<div id="contact" class="cn01Bg">
62
63		<!-- キャンバス -->
64		<div id="canvasCon" class="hide">
65			<div class="canvasCntnt">
66				<p class="signDisc">枠内にご署名ください</p>
67				<canvas id="canvas" width="" height=""></canvas>
68				<div class="clearBtn" onclick="prevCanvas()"><span>クリア</span></div>
69				<div id="ok" class="okBtn" onclick="chgImg()">OK</div>
70			</div>
71		</div>
72
73		<div class="sctionContainer">
74			<div class="cnCon">
75				<h2 class="cnHead">
76					<span class="scHeadSc cnHeadSc fontArial">署名する</span>
77				</h2>
78
79				<!-- 未入力アラート -->
80				<?php if ($err_msg != ''): ?>
81					<div><?php echo $err_msg; ?></div>
82				<?php endif; ?>
83
84				<!-- 送信完了テキスト -->
85				<?php if ($complete_msg != ''): ?>
86	        <div><?php echo $complete_msg; ?></div>
87	      <?php endif; ?>
88
89				<!-- フォーム -->
90				<form method="post" id="form">
91					<div class="cnFormItem">
92						<p class="cnFormItemName">お名前</p>
93						<div class="cnFormInput">
94							<input type="text" name="name" value="<?php echo $name; ?>">
95						</div>
96					</div>
97					<div class="cnFormItem">
98						<p class="cnFormItemName">フリガナ</p>
99						<div class="cnFormInput">
100							<input type="text" name="ruby" value="<?php echo $ruby; ?>">
101						</div>
102					</div>
103					<div class="cnFormItem">
104						<p class="cnFormItemName">ご署名</p>
105						<div id="img-box" class="cnFormTextArea">
106							<img id="newImg">
107						</div>
108					</div>
109					<div class="cnFormButton">
110						<input id="submit" type="submit" value="入力内容を送信する"></button>
111					</div>
112				</form>
113			</div>
114		</div>
115
116	</div>
117</section>
118</body>
119<script src="js/jquery-3.4.1.min.js"></script>
120<script src="js/canvas.js"></script>
121<script src="js/sign.js"></script>
122

js
1//sign.js
2'use strict';
3{
4  var canvas = document.getElementById("canvas");
5  var submit = document.getElementById("submit");
6  submit.addEventListener('click', function() {
7    submitForm();
8  });
9
10  function submitForm() {
11    var form = document.getElementById("form");
12    var base64 = canvas.toDataURL();
13    var newInput = document.createElement("input"); //input要素作成
14    newInput.type = "file";
15    newInput.src = base64;
16    newInput.name = "image";
17    form.appendChild(newInput); //formにinupt要素を追加
18  }
19}
20

m.ts10806

2020/04/21 10:48

「Canvas　サーバー　アップロード」で探すとそれなりに出てきますが、参考にした記事などはありますか？

mcy

2020/04/21 11:05

コメントありがとうございます。参考にさせていただき反映を試みたのですが、自分のソースコードになかなか落とし込めなかったため、何か糸口をと思い質問させていただきました。

m.ts10806

2020/04/21 11:07

参考にした記事URLを質問本文に提示してください。「適用できるかどうか」の判断もしたいので。

mcy

2020/04/21 11:17

追記しました。お手数ですがご確認お願いします。

退会済みユーザー

2020/04/21 12:03

メールの中に、アップロードされた画像を貼りたい、ってことですか？サーバー上にも画像を保存しつつの話ですか？

mcy

2020/04/21 12:12

メールの中に添付できれば良いです！サーバーに保存する必要はありません。

退会済みユーザー

2020/04/21 12:20

htmlメールを送信する際の、メールの仕組みはどのくらい理解できていますか？「htmlメールインライン画像 php」などとして見つかるような情報のことですが。

mcy

2020/04/21 12:39

今回参考にさせていただいたサイトの内容はおおよそ理解していますが、画像添付をプラスする過程でつまづいている状況です。

行動規範の内容に同意します

回答1件

ベストアンサー

①、②

アプローチ方法は 2種類考えられます.

HTMLのフォームでサーバーにアップロード。サーバーでメール送信。
DataForm + Ajax でサーバーにアップロード。サーバーでメール送信。

③　

Canvas から DataURIScheme にするなら、Base64 のデータを抽出可能でしょう。
この場合、1ファイル毎に3つの input[type=hidden] が（ filename, size, data ）が考えられます。

ご質問のように input[type=file] とする場合、普通のアップロートと同じなのでファイルはPHPによってテンポラリ保存されます。

現在の電子メールは「電磁的記録（私文書）」扱いになるため、業務用であれば印刷後にサーバー保存されたファイルを削除するといった運用面での対策が必要です。

送信メールにimgを追加する方法

上記、１つめのアプローチで「ファイルアップロード直後にメール送信する」方法は検索すれば見つかります（qiita PHPで画像添付メール送信）。
やっていることは、Multipurpose Internet Mail Extensions に準拠した $message を作成して送信しているだけです。