回答編集履歴

2

訂正

2020/09/11 23:44

投稿

AkitoshiManabe
AkitoshiManabe

スコア5432

test CHANGED
@@ -28,7 +28,7 @@
28
28
 
29
29
 
30
30
 
31
- Canvasの初期の頃から DataURL 取得は常套手段でしたが、データ部(Base64)をJSで別解になります。
31
+ Canvasの初期の頃から DataURL 取得は常套手段でしたが、データ部(Base64)をJSで取り出す別解になります。
32
32
 
33
33
 
34
34
 

1

追記

2020/09/11 23:44

投稿

AkitoshiManabe
AkitoshiManabe

スコア5432

test CHANGED
@@ -15,3 +15,37 @@
15
15
 
16
16
 
17
17
  こんな感じでしょうか。
18
+
19
+
20
+
21
+ ----
22
+
23
+ コメントを受けて追記
24
+
25
+
26
+
27
+ > Blobも試したのですが画像作成までたどり着けなくて
28
+
29
+
30
+
31
+ Canvasの初期の頃から DataURL 取得は常套手段でしたが、データ部(Base64)をJSでの別解になります。
32
+
33
+
34
+
35
+ Canvas -> DataURL -> Blob
36
+
37
+
38
+
39
+ 1. バイト配列化(Uint8Array)
40
+
41
+ 2. Blob(File) に変換
42
+
43
+
44
+
45
+ CODEPEN [parseDataURL()](https://codepen.io/AkitoshiManabe/pen/mdyROBp) の後方にてコメントしている箇所はヒントになるかもしれません。
46
+
47
+
48
+
49
+ ※ご質問のコードでも FormData を採用されているので、PHP側を弄らない方向が良いと感じています。
50
+
51
+ ちなみに[FormData.append()](https://developer.mozilla.org/ja/docs/Web/API/FormData/append) の Syntax 2つ目のコード(ファイル追加用)を利用する必要があります。