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.
}
