Diskuze: změna velikosti fotky

JavaScript JavaScript změna velikosti fotky

Avatar
katrincsak
Člen
Avatar
katrincsak:

Zdravím,

strávil jsem dost času, abych se naučil základy JavaScriptu a dokázal za pomocí JSON komunikovat s PHP. A i když už toto jsem schopný, jsem stále tam kde jsem byl.

Potřebuji upravit velikost fotky ještě před nahrátím, aby ten kdo nahrával třeba 5MB fotku, tak nenahrával skutečně 5MB. Ale aby se fotka již v klientovi upravila a nahrála se značně menší velikost.

Kod je velice jednoduchý a zatím testuji s jednou fotkou.
Nacházím samé zmenšení canvas, ale to je jenom náhled, nebo nevím. Jsem už jenom kousek od toho co potřebuji a schází mi proces na resize v javascriptu :-(

Kod byl už asi 50x předělávan a tak se omlouvám za chyby.

index.php

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Upload</title>
    <style>
    .container {
        width: 500px;
        margin: 0 auto;
    }
    .progress_outer {
        border: 1px solid #000;
    }
    .progress {
        width: 20%;
        background: #DEDEDE;
        height: 20px;
    }
    </style>
</head>
<body>
    <div class='container'>
        <p>
            Select File: <input type='file' id='_file' multiple /> <input type='button' id='_submit' value='Upload!'>
                        Text: <input type='text' id='_name'>
        </p>
        <div class='progress_outer'>
            <div id='_progress' class='progress'></div>
        </div>
    </div>
    <script src='nahrajFotku.js'></script>
</body>
</html>

JavaScript:

function resize(){
        upload();
}
function upload(){

    if(_file.files.length === 0){
        return;
    }

    var data = new FormData();
        //_file = resize(_file);
    data.append('SelectedFile', _file.files[0]);
        data.append('name', _name.value);

    var request = new XMLHttpRequest();
    request.onreadystatechange = function(){
        if(request.readyState == 4){
            try {
                var resp = JSON.parse(request.response);
                                alert("Vše ok");
            } catch (e){
                var resp = {
                    status: 'error',
                    data: 'Chyba: [' + request.responseText + ']'
                };
            }
            console.log(resp.status + ': ' + resp.data);
        }
    };

    request.upload.addEventListener('progress', function(e){
        _progress.style.width = Math.ceil(e.loaded/e.total) * 100 + '%';
    }, false);

    request.open('POST', 'form.php');
    request.send(data);
}

window.onload = function(){
        var _submit = document.getElementById('_submit'),
        _file = document.getElementById('_file'),
        _name = document.getElementById('_name'),
        _progress = document.getElementById('_progress');
        _submit.onclick = resize;
}

php komunikace

<?php
// Output JSON
function outputJSON($msg, $status = 'error'){
    header('Content-Type: application/json');
    die(json_encode(array(
        'data' => $msg,
        'status' => $status
    )));
}
$soubor = $_FILES['SelectedFile']['tmp_name'];
$soubor_name = $_FILES['SelectedFile']['name'];
$soubor_size = $_FILES['SelectedFile']['size'];
 
Odpovědět 18.10.2015 16:00
Avatar
patrik.valkovic
Šéfredaktor
Avatar
Odpovídá na katrincsak
patrik.valkovic:

Kód jsem nestuoval, ale na fotku můžeš definovat pomocí Canvasu Scale - http://www.w3schools.com/…as_scale.asp.
Z canvasu poté můžeš získat zpět data pomocí canvas.toDataUrl() - http://www.html5canvastutorials.com/…ge-data-url/.
Tyto data si můžeš poslat na server.

Editováno 18.10.2015 16:08
Akceptované řešení
+20 Zkušeností
+1 bodů
Řešení problému
Nahoru Odpovědět  +1 18.10.2015 16:08
Nikdy neumíme dost na to, abychom se nemohli něco nového naučit.
Avatar
katrincsak
Člen
Avatar
Odpovídá na patrik.valkovic
katrincsak:

Díky moc za navedení, hodně mi to pomohl abych se chytil a i když to tak nevypadalo, tak se to točilo kolem canvas.

Konečně 5MB fotka nahraná za 20s s uměle sníženým uploadem na 20 až 50 KB/s. !!

Řešení:

  1. Jakmile se zná URL "canvas.toData­URL();" tak už to stačí jen poslat do PHP.
  2. URL je nutné decode -> Na místo $_POST['test'] přijde vaše URL.
<?php
$filteredData=substr($_POST['test'], strpos($_POST['test'], ",")+1);
$decocedData = base64_decode($filteredData);
?>
  1. Dále se s tím manipuluje jako s obyčejným souborem, který je potřeba uložit..
<?php
$fp = fopen('test.png', 'wb');
  fwrite($fp, $decocedData);
  fclose($fp );
?>

Je to samozřejmě jen testovací, bez ošetření a bez dalších nutností. Na víc to bere jen 1 soubor, ale základ je hotov ;-)

Editováno 19.10.2015 18:23
 
Nahoru Odpovědět 19.10.2015 18:22
Avatar
katrincsak
Člen
Avatar
katrincsak:

Mimochodem, kdyby se někomu hodilo umělé snížení rychlosti internetu kvůli testování, tak doporučuji!

http://www.netlimiter.com/download

 
Nahoru Odpovědět 19.10.2015 18:25
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 4 zpráv z 4.