HTML 5開発ノート:CANVASを初覗き、canvas画像をサーバにアップロード

この文書では、Imageをcanvasに変換する方法と、canvasがImageを抽出する方法を示します.イメージをCanvasに変換画像をCanvasに変換するには、canvas要素contextのdrawImageメソッドを使用します.コードは次のとおりです.

//  image     canvas   
function convertImageToCanvas(image) { 
  //   canvas DOM  ，            
  var canvas = document.createElement("canvas"); 
  canvas.width = image.width; 
  canvas.height = image.height; 
  //   (0,0)          ，     。 
  canvas.getContext("2d").drawImage(image, 0, 0); 
  return canvas; 
} 

CanvasをImageに変換画像がcanvas上で処理されていると仮定すると、canvasを画像Imageオブジェクトに変換するには、以下の方法を使用します.コードは次のとおりです.

//   canvas      image 
function convertCanvasToImage(canvas) { 
  // Image  ，     DOM 
  var image = new Image(); 
  // canvas.toDataURL       Base64   URL，  ,          
  //      PNG 
  image.src = canvas.toDataURL("image/png"); 
  return image; 
} 

えっ!画像イメージとcanvasの相互変換はあなたが想像していたよりも簡単で、後で私はあなたに異なる画像処理技術をプレゼンテーションして、未来あなたはきっとこれらの技術で大金を稼ぐことができると信じています.
プロジェクトは画像を裁断する機能を実現し、ユーザーが顔をアップロードするときに画像を裁断し、適切な大きさの位置を選択して顔として使用することができる.中にはcropが使われています.jsというプラグインは、canvasでユーザーがカットしてスケールした画像を直接描きました.裁断の過程はこちらでは詳しく展開されていませんが、詳細を知りたい方はcropを深く理解してください.jsプラグインは、canvasピクチャを生成した後、ajaxを介してサーバにアップロードするプロセスを共有します.PHPを例にとると、[画像アップロード中..(1)]var canvas=document.getElementById("canvas_img");var img = canvas.toDataURL();var ajax = null; if (window.XMLHttpRequest) { ajax = new XMLHttpRequest();} else { ajax = new ActiveXObject("Microsoft.XMLHTTP");}ajax.onreadystatechange = function() { if (ajax.readyState == 4 && ajax.status == 200) { alert(ajax.responseText); }}ajax.open("POST", "save.php", true);ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");ajax.send("img="+ img); [画像アップロード中...(2)]
[写真アップ中...(3)]FILE.'/');//画像保存パス$img=$POST['img']; $img = str_replace('data:image/png;base64,', '', $img); $img = str_replace(' ', '+', $img); $data = base64_decode($img); $day = date("Ymd",time()); $file_name = mt_rand(1000000000000000,9999999999999999); if(!is_dir(UPLOAD_DIR . $day)){ mkdir(UPLOAD_DIR . $day); } $file = UPLOAD_DIR . $day."/".$file_name. '.png'; $success = file_put_contents($file, $data); return $success;?>