JAVASCRIPT etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
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>

Timer 30 saniye bekletme JS

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(countdown1000);

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>

TinyMCE editör WEB

Tinymce nedir?
-İçinde hemen hemen bütün gerekli toolları bulunduran, javascript ile yazılmış,
web tabanlı bir metin editörüdür.

İndirilmesi:
http://www.tinymce.com/download/download.php bu link ile kendi sitesinden indirelebilir.

Phone Accelerometer (Gyroscope) JS

Mobil uygulama çıkartmak istiyorsunuz ama dilleri bilmiyorsanız javascriptle x , y, z koordinatlarıyla accelerometer  (akselerometre,gyroscope)  yani telefonlarda sağ sola yatırıp nesneleri hareket ettirmek javascirpt özelliği göstereceğiz.



Not(Yaptığınız örneği pc den açarsanız hiçbirşey olmaz ,telefononlarda çalışır.)