1
キャンバスからajaxを使用してサーバーにアップロードしようとしていますが、毎回879バイトの空のイメージファイルがあるようです。私はどこに間違っているのか分からない。誰かが一見することができれば、それは最も高く評価されるだろう。キャンバスデータを保存しようとしましたが、ファイルが空になりました
document.getElementById('input').addEventListener("change",function (e) {
var file = e.target.files[0];
var reader = new FileReader();
var output = document.getElementById('test');
reader.onload = function() {
var data = this.result;
var img = new Image();
img.src = data;
img.onload = function() {
var ctx = canvas.getContext("2d");
output.innerHTML = 'width: ' + img.width + '\n' + 'height: ' + img.height;
ctx.drawImage(img, 0, 0, img.width, img.height);
};
};
reader.readAsDataURL(file);
var canvasData = canvas.toDataURL("image/png");
アヤックス以下
$アヤックス（{ タイプ： "POST"、 URL： "upload_images.php"、 データ：{canvasData：canvasData}、 成功：関数（）{ } }）;
$upload_dir = 'uploads/'; //implement this function yourself
$img = $_POST['canvasData'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = $upload_dir."image_name.png";
$success = file_put_contents($file, $data);
header('Location: '.$_POST['return_url']);
コールバックから 'toDataURL'を呼び出しているので、イメージが描画される前に実行されます。 – Kaiido
オンロードが実行されて空のキャンバスが出力されるのを待っていません。 JSはシングルスレッドで、現在の実行を終了するまではonloadは起動しません。 onData関数の最後にtoDataURLを追加する – Blindman67