Javascript/jQuery画像を正しいoreantation postに圧縮し、Ajaxを使用してコントローラに保存するLaravel 5.2

Question

私はLaravel 5.2フレームワークを使用しています。私のアプリケーションの要件は、データ・バンド幅の消費を最小限に抑えるためにクライアント側のイメージ圧縮を行うことです。これを達成するために、JavaScriptやjQueryのソリューションを探しています。私の前回のフォームアップロードを使用したマルチパートデータのアップロードから、いくつかの画像がサーバーにアップロードされることがわかったので、画像アップロードの前にクライアント側の向きを修正する必要があります。画像はajaxを使用してアップロードされます。結果として得られる画像のサイズは240x240でなければなりません。

Answer 1

これは比較的良い質問ですが、なぜ一部の人々が投票していないのか分かりません。多分問題の間違った句読点。

イメージを圧縮する最もよい方法は、最初にhtmlキャンバスに描画することです。あなたはEXIFのJavaScriptライブラリと、次の機能を含めることを忘れないでくださいもちろんの

var oFReader = new FileReader(); 
oFReader.readAsDataURL(document.getElementById("dstv_full_image").files[0]); 

oFReader.onloadend = function() { 
     //declare the exif variable 
     var exif =EXIF.readFromBinaryFile(base64ToArrayBuffer(this.result)); 
     //dynamicaly create the canvas 
     var canvas= document.createElement('canvas'); 
     canvas.id  = "CursorLayer"; 
     canvas.width = 160; 
     canvas.height = 160; 
     canvas.style.zIndex = 8; 
     canvas.style.position = "absolute"; 
     canvas.style.border = "1px solid"; 
     //declare canvas context 
     var ctx = canvas.getContext("2d"); 

     var img = new Image(); 
     //then on image load else code will run before and the result will be a black uploaded image! 
     img.onload = function() { 
       var orientation =exif.Orientation;; 

switch (orientation) { 
    case "2": 
    // horizontal flip 
    ctx.translate(width, 0) 
    ctx.scale(-1, 1) 
    ctx.drawImage(img, 0, 0,240, 240); 
    break 
    case "3": 
    // 180° rotate left 
    //ctx.translate(width, height) 
    ctx.rotate(Math.PI) 
    ctx.drawImage(img, -240, -240,240, 240); 
    break 
    case "4": 
    // vertical flip 
    //ctx.translate(0, height) 
    ctx.scale(1, -1) 
    ctx.drawImage(img, 0, 0,240, 240); 
    break 
    case "5": 
    // vertical flip + 90 rotate right 
    ctx.rotate(0.5 * Math.PI) 
    ctx.scale(1, -1) 
    ctx.drawImage(img, 0, -240,240, 240); 
    break 
    case "6": 
    // 90° rotate right 
    ctx.rotate(0.5 * Math.PI) 
    //ctx.translate(0, -height) 
    ctx.drawImage(img, 0, -240,240, 240); 
    break 
    case "7": 
    // horizontal flip + 90 rotate right 
    ctx.rotate(0.5 * Math.PI) 
    //ctx.translate(width, -height) 
    ctx.scale(-1, 1) 
    ctx.drawImage(img, 0, -240,240, 240); 
    break 
    case "8": 
    // 90° rotate left 
    //alert("steve") 
    ctx.rotate(-0.5 * Math.PI) 
    //ctx.translate(-width, 0) 
    ctx.drawImage(img, -240,0, 240, 240); 
    break 

    default: 
    ctx.drawImage(img, 0 ,0, 240, 240); 
    break 
} 
var dataURL=canvas.toDataURL(); 

        var request = $.ajax({ 
           url: "settings_picture_save", 
           type: "POST", 
           data: {quest_id : dataURL}, 
           dataType: "html" 
           }); 

          request.done(function(msg) { 
          console.log(msg); 


           } 


          }) 
         } 
      img.src =this.result; 
} 

ファイル入力を使用していると仮定すると、

あなたのコントローラ

public function settings_picture_save(Request $request){ 
    $src = Input::get('quest_id'); 
     //get the base-64 from data 
    //$base64_str = substr($myquest_id, strpos($myquest_id, ",")+1); 
    $src = str_replace('data:image/png;base64,', '', $src); 
    $src = str_replace(' ', '+', $src); 

    //decode base64 string 
    $image = base64_decode($src); 
    $png_url = "product-".time().".png"; 
    $path = ('uploads/' . $png_url); 

    //Image::make($image->getRealPath())->save($path); 
    // write image 
    $result = file_put_contents($path, $image); 
    echo json_encode('done'); 
} 

もちろんのドンに続いて

function base64ToArrayBuffer (base64) { 
    base64 = base64.replace(/^data\:([^\;]+)\;base64,/gmi, ''); 
    var binaryString = window.atob(base64); 
    var len = binaryString.length; 
    var bytes = new Uint8Array(len); 
    for (var i = 0; i < len; i++) { 
     bytes[i] = binaryString.charCodeAt(i); 
    } 
    return bytes.buffer; 
} 

必要なルートを忘れないでください