Dosya yüklenmeden önce boyutunu küçültmek JS
JAVASCRIPT Javascript ile fotoğraf küçültme.
input type file girdisine fotoğraf seçildikten sonra , javascript ile dosya boyutunu küçültüp (quality) tekrar input type file girdisini güncellendi. Php ile dosya uplaoad edilmesi.
Photo reduction with javascript. After selecting the input type photo, the file was entered with javascript (quality) and the input type file entry was updated again. Uploading files with PHP.
<?php //PHP sunucu dosya yüklenmesi.
$target_dir = "uploads/a.png";
if(isset($_POST["submit"])) {
var_dump(move_uploaded_file($_FILES["fileTest"]["tmp_name"], $target_dir));
}
?>
<body>
<form action="test.php" method="post" enctype="multipart/form-data">
<input id="img-input" type="file" name="fileTest" accept="image/*" />
<input type="submit" name="submit" value="aa">
</form>
<div id="root" style=" display: none; "></div>
<script type="text/javascript">
const input = document.getElementById("img-input");
input.onchange = function (ev) {
const file = ev.target.files[0]; // get the file
const blobURL = URL.createObjectURL(file);
const img = new Image();
img.src = blobURL;
img.onerror = function () {
URL.revokeObjectURL(this.src);
// Handle the failure properly
console.log("Cannot load image");
};
img.onload = function () {
URL.revokeObjectURL(this.src);
const mime_type = "image/jpeg";
const quality = qualityRate(file.size);
const canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
const ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, img.width, img.height);
document.getElementById("root").append(canvas);
//let data = canvas.toDataURL(mime_type,quality);
//downloadURI(data, 'stage.jpg');
//Dosya boyunun küçültülüp tekrar input file eklenmesi.
canvas.toBlob(blob => {
let localfile = new File([blob], 'a.jpg',{type:"image/jpeg", lastModified:new Date().getTime()}, 'utf-8');
let container = new DataTransfer();
container.items.add(localfile);
document.querySelector('#img-input').files = container.files;
},mime_type,quality);
};
};
//Dosya boyutuna göre dosya kalitesini düşürme.
function qualityRate(fileSize){
let QUALITY = 0.5;
if(1000000 > fileSize){
QUALITY = 0.5;
}
else if(3000000 > fileSize){
QUALITY = 0.7;
}
else if(5000000 > fileSize){
QUALITY = 0.5;
}
else if(10000000 > fileSize){
QUALITY = 0.9;
}
else{
QUALITY = 0.1;
}
console.log(QUALITY);
return QUALITY;
}
//küçültülen dosyayı indirme fonksiyonu, canvas dan dönen resmi indirmek.
function downloadURI(uri, name) {
var link = document.createElement('a');
link.download = name;
link.href = uri;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
delete link;
}
</script>
