Canvasの中身をformとしてPOSTし、DBに登録したい

他の方の質問などを参考に仕組んでみたのですが登録できず、下記コードのおかしい部分も思いつきません。
ご教授いただけないでしょうか？

追記：
参考にさせていただいたURL　https://teratail.com/questions/11714

やりたい事としては画像をcanvasでリサイズさせて、その他textと一緒にDBへ登録させたいです。
canvasで画像の表示までは出来ており、いざPOSTさせようと実行してもエラー表示が出ず、canvasの値も受け取れていないのですが何処で躓いているのか見当がつかない状況です。

php
1upfile.php
2
3<html lang="ja">
4<head>
5<meta charset="utf-8">
6<title>アップロードテスト</title>
7<style>
8.preview {
9    max-width: 300px;
10    max-height: 300px;
11    width: 300px;
12    height: 300px;
13    border: 1px solid darkgray;
14}
15</style>
16
17<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
18<script src="https://cdnjs.cloudflare.com/ajax/libs/exif-js/2.3.0/exif.js"></script>
19<script>
20$(function(){
21  $('#file1').change(function(e){
22    //ファイルオブジェクトを取得する
23    var file = e.target.files[0];
24    var reader = new FileReader();
25
26    //画像でない場合は処理終了
27    if(file.type.indexOf("image") < 0){
28      alert("画像ファイルを指定してください。");
29      $("#file1").val(''); //選択したファイルをクリア
30      return false;
31    }
32  });
33
34  window.addEventListener("load", function(){
35    //2Dコンテキストのオブジェクトを生成する
36    cvs = document.getElementById('preview1');
37    ctx = cvs.getContext('2d');
38  }
39  $('#del1').click(function() {
40    ctx.clearRect(0, 0, 800, 800);
41  });
42});
43
44function canvasToBlob(canvas, callback, type) {
45    if (!type) {
46        type = 'image/png';
47    }
48
49    if (canvas.toBlob) {
50        canvas.toBlob(callback, type);
51    } else if (canvas.toDataURL && window.Uint8Array && window.Blob && window.atob) {
52        var binStr = atob(canvas.toDataURL(type).replace(/^[^,]*,/, '')),
53        len = binStr.length,
54        arr = new Uint8Array(len);
55
56        for (var i = 0; i < len; i++) {
57            arr[i] = binStr.charCodeAt(i);
58        }
59
60        callback(new Blob([arr], { type: type }));
61    } else {
62        callback(null);
63    }
64}
65
66/**
67 * canvas画像の送信処理
68 *
69 * @param {Element} formElem フォームのDOMノード
70 */
71function send(formElem) {
72    var canvasElem = document.getElementById('preview1');
73
74    if (window.FormData) {
75        /**
76         * FormDataオブジェクトに対応している場合、
77         * canvas要素の画像をBlobオブジェクトに変換し、
78         * ファイルとして送信することを試みる
79         */
80        canvasToBlob(canvasElem, function (canvasBlob) {
81            if (canvasBlob) {
82                /**
83                 * canvas要素の画像をBlobオブジェクトとして出力できた場合、
84                 * FormDataオブジェクトにファイルとして追加し、送信
85                 */
86
87                /**
88                 * FormDataオブジェクトを生成
89                 */
90                var fd = new FormData(formElem);
91                /**
92                 * Blobオブジェクトを追加。
93                 * これにより、サーバ側ではcanvas-imageパラメータから
94                 * 画像ファイルとして取り込める
95                 */
96                fd.append('img1', canvasBlob);
97
98                /**
99                 * XMLHttpRequestオブジェクトを生成
100                 */
101                var xhr = new XMLHttpRequest();
102
103                // -------------------------
104                // Ajax通信完了時の処理などを記述…
105                // -------------------------
106
107                /**
108                 * Ajax通信の送信先・送信形式を指定
109                 * この例では、送信先としてフォームのaction属性値を使用
110                 */
111                xhr.open('POST', formElem.action, true);
112
113                /**
114                 * FormDataオブジェクトをAjax送信
115                 */
116                xhr.send(fd);
117            } else {
118                /**
119                 * canvas要素の画像をBlobオブジェクトとして出力できなかった場合、
120                 * 送信できなかった事をアラート
121                 */
122                alert('canvasの内容を送信できませんでした。\nお使いのブラウザは、Blobオブジェクトの生成に必要な機能に対応していません。');
123            }
124        }, 'image/png');
125    } else {
126        /**
127         * FormDataオブジェクトに対応していない場合、
128         * 送信できない事をアラート
129         */
130        alert('canvasの内容を送信できませんでした。\nお使いのブラウザは、FormDataオブジェクトに対応していません。');
131    }
132}
133
134/**
135 * フォームが送信される時に実行する処理
136 */
137document.getElementById('form-id').addEventListener('submit', function (e) {
138    /**
139     * フォームの要素を取得
140     */
141    var formElem = this;
142
143    /**
144     * フォームの送信をキャンセル
145     */
146    e.preventDefault();
147
148    /**
149     * フォームをAjax送信
150     */
151    send(formElem);
152}, false);
153
154</script>
155</head>
156<body>
157  <form action="upload.php" method="post" id="form-id" enctype="multipart/form-data">
158    <canvas id="preview1" class="preview"></canvas>
159<br>
160    <input type="file" accept="image/*" name="img1" id="file1"><input type="button" id="del1" value="クリア">
161
162<script>
163$(function(){
164
165  var canvas = document.getElementById( "preview1" );
166    var ctx = preview1.getContext('2d');
167
168    //ファイルを読み込んだら
169  $('#file1').on('change', function(e){
170
171    var fileData = e.target.files[0];
172    var orientation;
173
174    var reader = new FileReader();
175
176    var image = new Image();
177
178    EXIF.getData(fileData, function(){
179      orientation = fileData.exifdata.Orientation;
180    });
181
182    reader.onload = function() {
183
184      image.onload = function() {
185
186        var fd = new FormData();
187        var image_aspect,canvas_width,canvas_height,draw_width,draw_height;
188        //アスペクト取得
189        image_aspect = (orientation == 5 || orientation == 6 || orientation == 7 || orientation == 8) ? image.width / image.height : image.height / image.width;
190
191        canvas_width = 300;
192        canvas_height = Math.floor(300 * image_aspect);
193
194        //canvasの縦横サイズを指定
195        canvas.width = canvas_width;
196        canvas.height = canvas_height;
197        $('#preview1').width(canvas_width);
198          $('#preview1').height(canvas_height);
199
200          //描画サイズを指定
201          draw_width = canvas_width;
202          draw_height = canvas_height;
203
204          switch(orientation){
205
206            case 2:
207              ctx.transform(-1, 0, 0, 1, canvas_width, 0);
208            break;
209
210            case 3:
211              ctx.transform(-1, 0, 0, -1, canvas_width, canvas_height);
212            break;
213
214            case 4:
215              ctx.transform(1, 0, 0, -1, 0, canvas_height);
216            break;
217
218            case 5:
219              ctx.transform(-1, 0, 0, 1, 0, 0);
220              ctx.rotate((90 * Math.PI) / 180);
221              draw_width = canvas_height;
222              draw_height = canvas_width;
223            break;
224
225            case 6:
226              ctx.transform(1, 0, 0, 1, canvas_width, 0);
227              ctx.rotate((90 * Math.PI) / 180);
228              draw_width = canvas_height;
229              draw_height = canvas_width;
230            break;
231
232            case 7:
233              ctx.transform(-1, 0, 0, 1, canvas_width, canvas_height);
234              ctx.rotate((-90 * Math.PI) / 180);
235              draw_width = canvas_height;
236              draw_height = canvas_width;
237            break;
238
239            case 8:
240              ctx.transform(1, 0, 0, 1, 0, canvas_height);
241              ctx.rotate((-90 * Math.PI) / 180);
242              draw_width = canvas_height;
243              draw_height = canvas_width;
244            break;
245
246            default:
247            break;
248          }
249
250          //canvasを表示
251          $('#preview1').show();
252
253          //canvasに画像を描画
254          ctx.drawImage(image, 0, 0, draw_width, draw_height);
255      }
256      image.src = reader.result;
257    }
258        reader.readAsDataURL(fileData);
259  });
260});
261</script>
262</body>
263</html>

php
1upload.php
2
3<?php
4if(count($_FILES)>0 and count(array_filter($_FILES,function($x){return $x["error"]>0;}))==0){
5
6  // 画像データ
7  $id=filter_input(INPUT_POST,'id');
8  $img1 = file_get_contents($_FILES['img1']['tmp_name']);
9
10try{
11$dsn = 'mysql:dbname=article;host=localhost;charset=utf8';
12$user = 'root';
13$password = '';
14$pdo = new PDO($dsn, $user,$password);
15$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
16$sql = 'INSERT INTO
17`image` (id, img1)
18VALUES
19(:id, :img1)';
20
21$stmt = $pdo->prepare($sql);
22$stmt->bindValue(':id', $_POST['id']);
23
24$stmt->bindValue(':img1', $img1);
25$stmt->execute();
26}catch(PDOException $e){
27die($e->getMessage());
28}
29}
30
31?>

m.ts10806

2019/04/21 03:07 編集

>他の方の質問などを参考に仕組んでみたのですが登録できずその参考にした質問と、このコードで実際に起きている問題をご提示ください。（エラーが出るとか単に「できない」だけではなく何かしら起きていると思います。どこまで想定通り動いているかのデバッグもしてみてください）また「Canvasの中身を」と仰いますが、コードだけで質問者さんがやろうとしている要件や仕様までくみ取るのは困難です。どのような仕様で作ろうとしているのか、そのあたりを具体的に記載してください。それ次第でやろうとしていることよりも適切なやり方をアドバイスできるかもしれません