HkmSmart Technical Technology: JAVASCRIPT

JAVASCRIPT etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

Dosya yüklenmeden önce boyutunu küçültmek JS

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>

Pada 03:16

Timer 30 saniye bekletme JS

JAVASCRIPT

Burrona tıklandıktan etkinliştirilsin (button disable) 30 saniye sonra aktifleştirilsin (30 secend timer button enable) javascript kodu.

<script>

    var timeLeft = 30;

    var elem = document.getElementById('btn_list');

    var timerId = setInterval(countdown, 1000);

function countdown() {

    if (timeLeft == -1) {

        clearTimeout(timerId);

        doSomething();

    } else {

        $("#btn_list").prop("disabled", true);

        elem.innerHTML = 'Yeni işlem için  '+ timeLeft + 'sn bekleyiniz';

        timeLeft--;

    }

}

function doSomething() {

    $("#btn_list").prop("disabled", false);

    elem.innerHTML = 'Listele';

}

</script>