Ridimensionamento immagini lato client

[Gian76]

Ciao, ho questo magnifico script che semplicemente da LATO CLIENT ridimensiona l'immagine o le immagini e poi fà l'upload in una cartella e fino a qui tutto ok ! però perchè con i dispositivi mobili tipo android non và, anzi funziona a metà praticamente nella cartella mi ritrovo un immagine vuota di 1kb ? qualcuno sa spiegarmi il perchè e magari una soluzione ?

ecco il codice

index.html

      <input type="file" name="filesToUpload[]" id="filesToUpload" multiple="multiple" />		<output id="filesInfo"></output>


<script language="javascript" >
		// REIZE - UPLOAD
if (window.File && window.FileReader && window.FileList && window.Blob) {    document.getElementById('filesToUpload').onchange = function(){        var files = document.getElementById('filesToUpload').files;        for(var i = 0; i < files.length; i++) {            resizeAndUpload(files[i]);        }    };} else {    alert('The File APIs are not fully supported in this browser.');} function resizeAndUpload(file) {var reader = new FileReader();    reader.onloadend = function() {     var tempImg = new Image();    tempImg.src = reader.result;    tempImg.onload = function() {         var MAX_WIDTH = 800;        var MAX_HEIGHT = 600;        var tempW = tempImg.width;        var tempH = tempImg.height;        if (tempW > tempH) {            if (tempW > MAX_WIDTH) {               tempH *= MAX_WIDTH / tempW;               tempW = MAX_WIDTH;            }        } else {            if (tempH > MAX_HEIGHT) {               tempW *= MAX_HEIGHT / tempH;               tempH = MAX_HEIGHT;            }        }         var canvas = document.createElement('canvas');        canvas.width = tempW;        canvas.height = tempH;        var ctx = canvas.getContext("2d");        ctx.drawImage(this, 0, 0, tempW, tempH);        var dataURL = canvas.toDataURL("image/jpeg");         var xhr = new XMLHttpRequest();        xhr.onreadystatechange = function(ev){            document.getElementById('filesInfo').innerHTML = 'Done!';        };         xhr.open('POST', 'uploadResized.php', true);        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");        var data = 'image=' + dataURL;        xhr.send(data);      }    }   reader.readAsDataURL(file);}


</script>

uploadResized.php

<?
if ($_POST) {    define('UPLOAD_DIR', 'uploads/');    $img = $_POST['image'];    $img = str_replace('data:image/jpeg;base64,', '', $img);    $img = str_replace(' ', '+', $img);    $data = base64_decode($img);    $file = UPLOAD_DIR . uniqid() . '.jpg';    $success = file_put_contents($file, $data);    print $success ? $file : 'Unable to save the file.';}?>

[br1]

E' probabile che il tuo cell non riesca ad interpretare correttamente il codice javascript formattato in quel modo, spendi un pochino di tempo per mettere i giusti "a capo" quando necessario.

[cavicchiandrea]

in oltre non è detto che filereader sia supportato

[Gian76]

br1 grazie per la risposta ma quando copio ed incollo il codice in questo forum mi mette tutti gli a capo sbagliati non so perchè comunque ho provato anche a sistemare un pò gli a capo, come ta tuo consiglio ma non cambia nulla.

per cavicchiandrea e se fosse proprio il filereader che non è supportato dal mobile/android cosa potrei utilizzare ?

<script language="javascript" >
        // RESIZE AND UPLOAD
if (window.File && window.FileReader && window.FileList && window.Blob) {    document.getElementById('filesToUpload').onchange = function(){        var files = document.getElementById('filesToUpload').files;        for(var i = 0; i < files.length; i++) {            resizeAndUpload(files[i]);        }    };} else {    alert('The File APIs are not fully supported in this browser.');} function resizeAndUpload(file) {var reader = new FileReader();    reader.onloadend = function() {     var tempImg = new Image();    tempImg.src = reader.result;    tempImg.onload = function() {         var MAX_WIDTH = 800;        var MAX_HEIGHT = 600;        var tempW = tempImg.width;        var tempH = tempImg.height;        if (tempW > tempH) {            if (tempW > MAX_WIDTH) {               tempH *= MAX_WIDTH / tempW;               tempW = MAX_WIDTH;            }        } else {            if (tempH > MAX_HEIGHT) {               tempW *= MAX_HEIGHT / tempH;               tempH = MAX_HEIGHT;            }        }         var canvas = document.createElement('canvas');        canvas.width = tempW;        canvas.height = tempH;        var ctx = canvas.getContext("2d");        ctx.drawImage(this, 0, 0, tempW, tempH);        var dataURL = canvas.toDataURL("image/jpeg");         var xhr = new XMLHttpRequest();        xhr.onreadystatechange = function(ev){            document.getElementById('filesInfo').innerHTML = 'Upload OK!';        };         xhr.open('POST', 'UploadImages.php', true);        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");        var data = 'image=' + dataURL;        xhr.send(data);      }    }   reader.readAsDataURL(file);}
</script> 

[Gian76]

<script language="javascript" >


// RESIZE AND UPLOAD


if (window.File && window.FileReader && window.FileList && window.Blob) {
document.getElementById('filesToUpload').onchange = function(){
var files = document.getElementById('filesToUpload').files;
for(var i = 0; i < files.length; i++) {
resizeAndUpload(files[i]);
}
};
} else {
alert('The File APIs are not fully supported in this browser.');
}

function resizeAndUpload(file) {
var reader = new FileReader();
reader.onloadend = function() {

var tempImg = new Image();
tempImg.src = reader.result;
tempImg.onload = function() {

var MAX_WIDTH = 800;
var MAX_HEIGHT = 600;
var tempW = tempImg.width;
var tempH = tempImg.height;
if (tempW > tempH) {
if (tempW > MAX_WIDTH) {
tempH *= MAX_WIDTH / tempW;
tempW = MAX_WIDTH;
}
} else {
if (tempH > MAX_HEIGHT) {
tempW *= MAX_HEIGHT / tempH;
tempH = MAX_HEIGHT;
}
}

var canvas = document.createElement('canvas');
canvas.width = tempW;
canvas.height = tempH;
var ctx = canvas.getContext("2d");
ctx.drawImage(this, 0, 0, tempW, tempH);
var dataURL = canvas.toDataURL("image/jpeg");

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(ev){
document.getElementById('filesInfo').innerHTML = 'Upload OK!';
};

xhr.open('POST', 'UploadImages.php', true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
var data = 'image=' + dataURL;
xhr.send(data);
}

}
reader.readAsDataURL(file);
}


</script>

[cavicchiandrea]

Non credo ci sia un alternativa, pertanto direi nulla

[Gian76]

credo che supporti il filereader android perchè se faccio questo script per l'anteprima delle immagini funziona perfettamente:




<script language="javascript" >


// ANTEPRIMA IMMAGINE/I SELEZIONATE

function fileSelect(evt) {
if (window.File && window.FileReader && window.FileList && window.Blob) {
var files = evt.target.files;

var result = '';
var file;
for (var i = 0; file = files[i]; i++) {
// if the file is not an image, continue
if (!file.type.match('image.*')) {
continue;
}

reader = new FileReader();
reader.onload = (function (tFile) {
return function (evt) {
var div = document.createElement('div');
div.innerHTML = '<img style="width:120px; float:left; margin-right:2px;" src="' + evt.target.result + '" />';
document.getElementById('filesInfo2').appendChild( div);
};
}(file));
reader.readAsDataURL(file);
}
} else {
alert('The File APIs are not fully supported in this browser.');
}
}

document.getElementById('filesToUpload').addEventL istener('change', fileSelect, false);


</script>

[Gian76]

allora ho trovato il problema che non è in javascript ma è in php, posto il codice per intero per chi ne avesse bisogno:

Index.html




<!-- START RESIZE AND UPLOAD IMAGES -->


<input type="file" name="filesToUpload[]" id="filesToUpload" multiple="multiple" />
<output id="filesInfo"></output> <!-- Risultato Upload -->
<br />
<br />
<output id="filesInfo2"></output> <!-- Anteprima Immagini -->




<script language="javascript" >


// RESIZE AND UPLOAD


if (window.File && window.FileReader && window.FileList && window.Blob) {
document.getElementById('filesToUpload').onchange = function(){
var files = document.getElementById('filesToUpload').files;
for(var i = 0; i < files.length; i++) {
resizeAndUpload(files[i]);
}
};
} else {
alert('The File APIs are not fully supported in this browser.');
}

function resizeAndUpload(file) {
var reader = new FileReader();
reader.onloadend = function() {

var tempImg = new Image();
tempImg.src = reader.result;
tempImg.onload = function() {

var MAX_WIDTH = 800;
var MAX_HEIGHT = 600;
var tempW = tempImg.width;
var tempH = tempImg.height;
if (tempW > tempH) {
if (tempW > MAX_WIDTH) {
tempH *= MAX_WIDTH / tempW;
tempW = MAX_WIDTH;
}
} else {
if (tempH > MAX_HEIGHT) {
tempW *= MAX_HEIGHT / tempH;
tempH = MAX_HEIGHT;
}
}

var canvas = document.createElement('canvas');
canvas.width = tempW;
canvas.height = tempH;
var ctx = canvas.getContext("2d");
ctx.drawImage(this, 0, 0, tempW, tempH);
var dataURL = canvas.toDataURL("image/jpeg");


var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(ev){
document.getElementById('filesInfo').innerHTML = 'Upload OK!';
};

xhr.open('POST', 'UploadImages.php', true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
var data = 'image=' + dataURL;
xhr.send(data);
}

}
reader.readAsDataURL(file);
}


</script>




<script language="javascript" >


// ANTEPRIMA IMMAGINE/I SELEZIONATE

function fileSelect(evt) {
if (window.File && window.FileReader && window.FileList && window.Blob) {
var files = evt.target.files;

var result = '';
var file;
for (var i = 0; file = files[i]; i++) {
// if the file is not an image, continue
if (!file.type.match('image.*')) {
continue;
}

reader = new FileReader();
reader.onload = (function (tFile) {
return function (evt) {
var div = document.createElement('div');
div.innerHTML = '<img style="width:120px; float:left; margin-right:2px;" src="' + evt.target.result + '" />';
document.getElementById('filesInfo2').appendChild( div);
};
}(file));
reader.readAsDataURL(file);
}
} else {
alert('The File APIs are not fully supported in this browser.');
}
}

document.getElementById('filesToUpload').addEventL istener('change', fileSelect, false);


</script>


<!-- END RESIZE AND UPLOAD IMAGES -->




UploadImages.php di seguito per il funzionamento su desktop

< ?php


if ($_POST) {
define('UPLOAD_DIR', 'uploads/');
$img = $_POST['image'];
$img = str_replace('data:image/jpeg;base64,', '', $img); // cambia solo questo
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = UPLOAD_DIR . uniqid() . '.jpg';
$success = file_put_contents($file, $data);
print $success ? $file : 'Unable to save the file.';
}


? >


oppure UploadImages.php di seguito per il funzionamento su Android/Mobile

< ?php


if ($_POST) {
define('UPLOAD_DIR', 'uploads/');
$img = $_POST['image'];
$img = str_replace('data:image/png;base64,', '', $img); // cambia solo questo
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = UPLOAD_DIR . uniqid() . '.jpg';
$success = file_put_contents($file, $data);
print $success ? $file : 'Unable to save the file.';
}


? >



ovvio che bisogna creare la cartella uploads