アップロードの高速化のために画像ファイルのサイズを縮小しますか？

Question

サーバーにajaxを使用してファイルをアップロードする簡単なコードがありますが、パフォーマンス向上のために画像のサイズを変更する方法がわかりません。

プレビュー画像のコード。コードのアップロード画像の

function Preview_Image(index){ 
    var img = document.createElement("img"); 
    img.src = window.URL.createObjectURL(filesList[index]); 
    $('#loaded-image-frame' + index + ' #preview').html(img); 
    img.onload = function() { 
     window.URL.revokeObjectURL(img.src); 
    } 
} 

..

function Upload_ResizedImage(index){ 
    var image = filesList[index] 
    var form_data = new FormData(); 
    form_data.append('file[]', image); 
    process = $.ajax({ 
     url: "ControlPanelAjax.ashx?job=UploadImages, 
     type: "POST", 
     data: form_data, 
     processData: false, 
     cache: false, 
     contentType: false, 
     beforeSend: function (event) { }, 
     success: function (data, textStatus, jQxhr) { 
      if (data != '-1') { 
       alert("image uploaded correctly"); 
      } 
      else { 
       alert("Error Uploading.."); 
      } 
     }, 
     complete: function (event) {}, 
     error: function (jqXhr, textStatus, errorThrown) {}, 
     xhr: function() {} 
    }); 
} 

注：filesListは、私はあなたがHTML5から、この使用してキャンバスを達成することができます

Answer 1

を作ったファイルを含む配列です。ここでa tutorialであり、ここで、関連するコードが

HTMLです：

if (window.File && window.FileReader && window.FileList && window.Blob) { 
    document.getElementById('filesToUpload').onchange = function(){ 
     var files = document.getElementById('filesToUpload').files; 
     for(var i = 0; i < files.length; i++) { 
      resizeAndUpload(files[i]); 
     } 
    }; 
} else { 
    alert('The File APIs are not fully supported in this browser.'); 
} 

function resizeAndUpload(file) { 
var reader = new FileReader(); 
    reader.onloadend = function() { 

    var tempImg = new Image(); 
    tempImg.src = reader.result; 
    tempImg.onload = function() { 

     var MAX_WIDTH = 400; 
     var MAX_HEIGHT = 300; 
     var tempW = tempImg.width; 
     var tempH = tempImg.height; 
     if (tempW > tempH) { 
      if (tempW > MAX_WIDTH) { 
       tempH *= MAX_WIDTH/tempW; 
       tempW = MAX_WIDTH; 
      } 
     } else { 
      if (tempH > MAX_HEIGHT) { 
       tempW *= MAX_HEIGHT/tempH; 
       tempH = MAX_HEIGHT; 
      } 
     } 

     var canvas = document.createElement('canvas'); 
     canvas.width = tempW; 
     canvas.height = tempH; 
     var ctx = canvas.getContext("2d"); 
     ctx.drawImage(this, 0, 0, tempW, tempH); 
     var dataURL = canvas.toDataURL("image/jpeg"); 

     var xhr = new XMLHttpRequest(); 
     xhr.onreadystatechange = function(ev){ 
      document.getElementById('filesInfo').innerHTML = 'Done!'; 
     }; 

     xhr.open('POST', 'uploadResized.php', true); 
     xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 
     var data = 'image=' + dataURL; 
     xhr.send(data); 
     } 

    } 
    reader.readAsDataURL(file); 
} 

はPHP：

if ($_POST) { 
    define('UPLOAD_DIR', 'uploads/'); 
    $img = $_POST['image']; 
    $img = str_replace('data:image/jpeg;base64,', '', $img); 
    $img = str_replace(' ', '+', $img); 
    $data = base64_decode($img); 
    $file = UPLOAD_DIR . uniqid() . '.jpg'; 
    $success = file_put_contents($file, $data); 
    print $success ? $file : 'Unable to save the file.'; 
}