質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.07%

Canvasでリサイズした画像ファイルをサーバにPOSTしたい

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 4,564

tktk8924

score 14

File APIで読み込んだ画像をCanvasでリサイズしたあと、その画像をフォームデータとしてサーバに送信したいと考えています。とりあえず以下のようにAJAXでフォームを送信する方法はできたのですが、AJAXではなく普通に画面遷移する形でフォーム送信がしたいです。

リサイズした画像ファイルをフォーム送信する方法を教えて下さい。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>TEST</title>
</head>
<body>
  <form id="upload-form" action="upload" method="post" enctype="multipart/form-data">
    <input id="input-file" type="file">
    <input id="upload-button" type="submit" value="Submit">
  </form>
  <script src="javascripts/myscript.js"></script>
</body>
</html>
window.onload = function() {
  resize();
  upload();
}

function resize() {
  var input = document.getElementById('input-file');
  input.addEventListener('change', function() {
    var file = this.files[0];
    if (!file.type.match(/^image\/(png|jpeg|gif)$/)) return;

    var canvas = document.createElement('canvas');
    if (!canvas || !canvas.getContext) return;

    var img = new Image();
    var fr = new FileReader();

    fr.onload = function() {
      img.onload = function() {
        canvas.width = img.width * 0.1;
        canvas.height = img.height * 0.1;
        var ctx = canvas.getContext('2d');
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
        document.getElementsByTagName('body')[0].appendChild(canvas);
      }

      img.src = this.result;
    }

    fr.readAsDataURL(file);

  });
}

function upload() {
  var button = document.getElementById('upload-button');
  button.addEventListener('click', function(e) {
    e.preventDefault();

    var form = document.getElementById('upload-form');
    var formData = new FormData(form);
    var canvases = document.getElementsByTagName('canvas');
    for (var i = 0; i < canvases.length; i++) {
      formData.append("avatar", createBlob(canvases[i].toDataURL('image/jpg')));
    }

    var request = new XMLHttpRequest();
    request.open("POST", "upload");
    request.send(formData);
  });
}

function createBlob(dataUrl) {
  var bin = atob(dataUrl.replace(/^.*,/, ''));
  var buffer = new Uint8Array(bin.length);
  for (var i = 0; i < bin.length; i++) {
      buffer[i] = bin.charCodeAt(i);
  }
  var blob = new Blob([buffer.buffer], {
      type: 'image/jpg'
  });
  return blob;
}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

0

window.onloadをフォームのonsubmitにすればよいのでは?

document.getElementById('upload-form').addEventListener('submit', function(e) {
  e.preventDefault(); // フォームの元々の挙動を無効化

  resize();
  upload();
});


みたいな感じで。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/03/23 22:43

    回答有り難うございます。
    教えていただいたやり方だと、XMLHttpRequestによる非同期通信であることにはかわらないんじゃないでしょうか?(ページ遷移しない)

    やりたいこととしては、<input type="file">で読み込んだ画像をリサイズした画像で上書きして普通にフォームで送信することです。
    そもそも画像の上書きができるのかわからないのですが。。

    キャンセル

  • 2016/03/23 23:10

    やりたいことはまさにこれでした。
    https://teratail.com/questions/11714

    やはりAJAXで送る以外に今のところ方法はなさそうですね。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.07%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る