Javascript ile dosyayı upload etmeden sıkıştırma (compress)

File Input ile seçilen resimlerin sunucuya gönderilmeden önce sıkıştırılması için onchange event'ına fonksiyonumuzu yazıyoruz.

<input type="file" accept="image/*" onchange="compress(this, 70, "jpeg",upload)">

compress fonksiyonumuz aşağıdadır. 

file parametresi = file input'tur.

quality = sıkıştırma oranını belirler.

output_format = jpeg veya png olarak dışarı aktarılacağını belirler.

callback = işlem bittikten sonra çağırılacak fonksiyon.

function compress(file, quality, output_format, callback) {
    var mime_type = "image/jpeg", 
    file = window.URL.createObjectURL(file.files[0]);
    if (output_format == "png") {
        mime_type = "image/png";
    }
    var image = new Image();
    image.onload = function() {
        var cvs = document.createElement('canvas');
        cvs.width = image.naturalWidth;
        cvs.height = image.naturalHeight;
        var ctx = cvs.getContext("2d").drawImage(image, 0, 0);
        var newImageData = cvs.toDataURL(mime_type, quality / 100);
        var result_image_obj = new Image();
        result_image_obj.src = newImageData;
        callback(result_image_obj);
    };
    image.src = file
}

function upload(image){
    console.log(image); // Base64 olarak encode'lanmış şekilde geri dönecektir.
}