☰

HTML5 Canvas をサーバー上の画像として保存するにはどうすればいいですか? 質問する

tag-icon • tag-icon javascript php ajax html5-canvas
HTML5 Canvas をサーバー上の画像として保存するにはどうすればいいですか? 質問する

私はジェネレーティブ アート プロジェクトに取り組んでおり、アルゴリズムから生成された画像をユーザーが保存できるようにしたいと考えています。基本的なアイデアは次のとおりです。

  • 生成アルゴリズムを使用して HTML5 キャンバス上に画像を作成する
  • 画像が完成したら、ユーザーがキャンバスを画像ファイルとしてサーバーに保存できるようにします。
  • ユーザーが画像をダウンロードしたり、アルゴリズムを使用して生成された作品のギャラリーに追加したりできるようにします。

しかし、私は2番目のステップで行き詰まっています。Googleの助けを借りて、これを見つけましたブログ投稿まさに私が求めていたものだったようです。

その結果、次の JavaScript コードが生まれました。

function saveImage() {
  var canvasData = canvas.toDataURL("image/png");
  var ajax = new XMLHttpRequest();

  ajax.open("POST", "testSave.php", false);
  ajax.onreadystatechange = function() {
    console.log(ajax.responseText);
  }
  ajax.setRequestHeader("Content-Type", "application/upload");
  ajax.send("imgData=" + canvasData);
}

対応する PHP (testSave.php):

<?php
if (isset($GLOBALS["HTTP_RAW_POST_DATA"])) {
  $imageData = $GLOBALS['HTTP_RAW_POST_DATA'];
  $filteredData = substr($imageData, strpos($imageData, ",") + 1);
  $unencodedData = base64_decode($filteredData);
  $fp = fopen('/path/to/file.png', 'wb');

  fwrite($fp, $unencodedData);
  fclose($fp);
}
?>

しかし、これは何も効果がないようです。

さらにグーグルで検索すると、ブログ投稿これは前回のチュートリアルに基づいています。あまり違いはありませんが、試してみる価値はあるかもしれません。

$data = $_POST['imgData'];
$file = "/path/to/file.png";
$uri = substr($data,strpos($data, ",") + 1);

file_put_contents($file, base64_decode($uri));
echo $file;

これはファイルを作成します (やった) が、破損しており、何も含まれていないようです。また、空のようです (ファイル サイズは 0)。

私が間違っていることは明らかですか? ファイルを保存しているパスは書き込み可能なので問題はありませんが、何も起こっていないようで、これをデバッグする方法がよくわかりません。

編集

Salvidor Dali のリンクに従って、AJAX リクエストを次のように変更しました。

function saveImage() {
  var canvasData = canvas.toDataURL("image/png");
  var xmlHttpReq = false;

  if (window.XMLHttpRequest) {
    ajax = new XMLHttpRequest();
  }
  else if (window.ActiveXObject) {
    ajax = new ActiveXObject("Microsoft.XMLHTTP");
  }

  ajax.open("POST", "testSave.php", false);
  ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  ajax.onreadystatechange = function() {
    console.log(ajax.responseText);
  }
  ajax.send("imgData=" + canvasData);
}

x-www-form-urlencodedこれで、画像ファイルが作成され、空ではなくなりました。コンテンツ タイプが重要で、それを変更すると画像データを送信できるようになったようです。

コンソールは、base64 コードの (かなり大きい) 文字列を返し、データファイルは ~140 kB です。ただし、まだ開くことができず、画像としてフォーマットされていないようです。

ベストアンサー1

必要なことを実現する方法の例を次に示します。

  1. 何かを描く（キャンバスチュートリアル）

<canvas id="myCanvas" width="578" height="200"></canvas>

<script>
  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');

  // begin custom shape
  context.beginPath();
  context.moveTo(170, 80);
  context.bezierCurveTo(130, 100, 130, 150, 230, 150);
  context.bezierCurveTo(250, 180, 320, 180, 340, 150);
  context.bezierCurveTo(420, 150, 420, 120, 390, 100);
  context.bezierCurveTo(430, 40, 370, 30, 340, 50);
  context.bezierCurveTo(320, 5, 250, 20, 250, 50);
  context.bezierCurveTo(200, 5, 150, 20, 170, 80);

  // complete custom shape
  context.closePath();
  context.lineWidth = 5;
  context.fillStyle = '#8ED6FF';
  context.fill();
  context.strokeStyle = 'blue';
  context.stroke();
</script>

  1. キャンバス画像を URL 形式 (base64) に変換する

        // script

    var dataURL = canvas.toDataURL();

  2. Ajax経由でサーバーに送信する

    $.ajax({
      type: "POST",
      url: "script.php",
      data: { 
         imgBase64: dataURL
      }
    }).done(function(o) {
      console.log('saved'); 
      // If you want the file to be visible in the browser 
      // - please modify the callback in javascript. All you
      // need is to return the url to the file, you just saved 
      // and than put the image in your browser.
    });

  1. base64を画像としてサーバーに保存します（ここにPHPでこれを行う方法同じ考え方はどの言語でも同じです。PHPのサーバー側はここで見つかりました):

おすすめ記事