canvasで画像を作成してもらいフォームで送信してもらう

Question

前提・実現したいこと

ユーザーにcanvasで画像を作成してもらい、その画像をフォームで送信してもらうプログラムを考えています。
自分なりに試したことは
1,jsを使いcanvas画像をBase64に直す
2,AjaxでPHPにPOST送信
3,PHPでbase64をデコード。一時的な画像を作成。
4,それをformのfileに代入
みたいな感じ行けるのでは?と思ったのですが「4」の方法がわかりませんでした。(*3までは動きます)

現状で望むのは「4」の方法です。
ただ、根本的にいらない作業で遠回りしてるのかもしれません。もっと簡単な方法があればそちらの答えも求めています。
どなたかお分かりになる方、知識をお借りできれば幸いです。
よろしくお願いしますm(_)m

function toBase64() {
    Base64 = canvas.toDataURL('image/png');
    let formData = new FormData();
    formData.append("Data", Base64);
    return formData;
}

function asyncRequest(Base64){
    const xhr = new XMLHttpRequest();
    xhr.open("POST", "/test.php", true);
    xhr.onload = function(e) {
        if (xhr.readyState == 4 && xhr.status == 200) {
            console.log(xhr.responseText);
        }
      };
    xhr.send(Base64);
}

define('UPLOAD_DIR', './test/');
$img =  $_POST['Data'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = UPLOAD_DIR . 'aa' . '.png';
$success = file_put_contents($file, $data);
print $success ? $file : 'Unable to save the file.';

<form>
<input type="file" name="f" size="30" id="">
</form>

##追記
添付ファイルで画像確認するのが目的の1つです。base64やBlobをformに埋め込むのは出来ますが大量のサイズになるのに加えて受信時に画像確認ができないとの判断です

Answer 1

根本的にいらない作業で遠回りしてるのかもしれません。もっと簡単な方法があれば

1. jsを使いcanvas画像をBlob（or File）に変換する
2. FormData を使って、PHPにPOST送信(Ajax)

※PHPでは通常のフォームと同様に処理できる

こんな感じでしょうか。

---

コメントを受けて追記

Blobも試したのですが画像作成までたどり着けなくて

Canvasの初期の頃から DataURL 取得は常套手段でしたが、データ部（Base64）をJSで取り出す別解になります。

Canvas -> DataURL -> Blob

1. バイト配列化（Uint8Array）
2. Blob(File) に変換

CODEPEN parseDataURL() の後方にてコメントしている箇所はヒントになるかもしれません。

※ご質問のコードでも FormData を採用されているので、PHP側を弄らない方向が良いと感じています。
ちなみにFormData.append() の Syntax 2つ目のコード（ファイル追加用）を利用する必要があります。

Comments

[tonpoko]

Blobも試したのですが画像作成までたどり着けなくて・・Base64で妥協しています。
わかりにくくてすいません。現状で必要なのはフォームに画像を埋め込む処理がわからないことです。メールとして送られてきた添付ファイルを確認したいのです。*サーバー上にいらない画像が貯まるのを懸念

[tonpoko]

回答ありがとうございます。
#ちなみにFormData.append() の Syntax 2つ目のコード・・
とは、formData.append(name, value, filename); のファイルネームを任意で追加するということでしょうか?どうしてもPHP側で値が取れなくて・・
Base64 = canvas.toDataURL('image/png');
let bin = atob(Base64.split(',')[1])
let buffer = new Uint8Array(bin.length);
for (var i = 0; i < bin.length; i++) {
buffer[i] = bin.charCodeAt(i);
}
let blob = new Blob([buffer.buffer], {type: 'image/png'});

console.log(blob); //Blob {size: 25974, type: "image/png"}

let formData = new FormData();
formData.append("Data", blob, 'filename');
formData.append('name', 'hoge'); //送信テスト用

#PHP
print_r($_POST);
Array
(
[name] => hoge
)
となりblobがPOSTされていない状態になります。なにか特殊なとり方があるのでしょうか?
どこか間違ってる箇所があればぜひご教授ください。お願いいたします

[AkitoshiManabe]

php に送信する ファイルフィールド の name属性は phpに合わせて files[] のような名称を使いませんか？
formData.append() の第一引数が input[name] に相当します。