Javascript Cropperを使用してサーバーに投稿された画像サイズを修正する方法

Question

私はコンテンツ管理システムでCropper https://github.com/fengyuanchen/cropperを使用していますが、クロップされた画像のサイズを修正するために苦労しています。

私がしたいことは、キャンバスに描かれているクロップボックスのサイズも、正確に560ピクセルx420ピクセルのクロップされたイメージサイズがWebサーバーに渡されることを保証することです。

現時点で私が持っているIQUERYコードは次のとおりです。 -

$("#accept_crop").click(function() { 

     var $image = $("#image"); 
     var cropper = $image.cropper(); 
     var baseURL = window.location.protocol+'//'+window.location.host; 
     var pho_id = $("input[name=pho_id]").val(); 
     var mem_id = $("input[name=mem_id]").val(); 
     var photopath = $("input[name=photopath]").val(); 
     $image.cropper('getCroppedCanvas').toBlob(function (blob) { 
       var formData = new FormData(); 
       formData.append('croppedImage', blob); 
       formData.append('pho_id', pho_id); 
       formData.append('mem_id', mem_id); 
       formData.append('photopath', photopath); 
       $.ajax(baseURL+'/path', { 
        method: "POST", 
        data: formData, 
        processData: false, 
        contentType: false, 
        success: function() { 
         console.log('Upload success'); 
        }, 
        error: function() { 
         console.log('Upload error'); 
        } 
       }); 
     }, 'image/jpeg', 0.8);  

}); 

トリミングされた画像は、罰金の上を通過するが、常に描かれていますクロップボックスのサイズに応じて可変サイズになります。画像を拡大縮小するために、トリミングボックスに関係なく、クライアントサイトのサイズを修正する方法はありますか？PHPを使用しないで再スケールしますか？

Answer 1

これはいつも起こっているようです...私が質問を投稿するとすぐに、私はそれを理解しようとしている年月をすでに過ごしたにもかかわらず、すぐ後でそれに答えます。幅と高さのオプションを追加する追加することで、これが動作しているようです

： -

$image.cropper('getCroppedCanvas', {'width': 560, 'height': 420}).toBlob(function (blob) { 

Answer 2

それは行うことができ、そのマニュアルを確認してください。

https://github.com/fengyuanchen/cropper#getcroppedcanvasoptions

あなたは先の幅を設定することができますし、出力キャンバスの高さ。

その他のことは、必要な幅と高さに応じて割合を設定する必要があります。 560/420は4/3に比例する。 aspectRatio：4/3を設定します。何かを妥協することなくイメージをあなたの望みのサイズにリサイズします。