PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
S

Dataverkeer foto's uploaden en verkleinen?

Door Sven de Haas op 14-10-2014 10:55
973 views
Goedemorgen,
Ik heb een script gemaakt waar medewerkers van mijn website foto's kunnen uploaden.
Het script zorgt ervoor dat (te) grote afbeeldingen worden verkleind, tumbnails worden gemaakt en een watermerk wordt toegevoegd.

Zoals het nu gaat gaat dit in deze volgorde:
Foto's uploaden (move_uploaded_file) -> Foto's verkleinen -> Tumbnails maken -> Watermerk toevoegen (niet op tumbs)

Het werkt perfect, echter voorzie ik hier nog wel een mogelijk probleem:
Als een medewerker bijvoorbeeld 100 foto's gaat uploaden van 3mb per stuk dan heb ik al snel 300mb dataverkeer te pakken?

Is er ook een manier om de foto's te verkleinen voordat het script ze gaat uploaden? Misschien met 'tmp_name' van de $_FILES o.i.d.?

Ik weet dat ik met de 'size' van $_FILES kan zorgen dat ik een filter kan maken op te grote bestanden. Maar i.v.m. gebruikersgemak hoop ik eigenlijk dat hier ook een andere optie voor is.

Groeten
Ariën
14-10-2014 11:20
Inderdaad, daar heb je weer gelijk in ;-)
S
Sven de Haas
14-10-2014 16:10
- Aar - op 14/10/2014 11:20:32

Inderdaad, daar heb je weer gelijk in ;-)

Ik ben er nu een tijdje mee bezig.
Kun je mij uitleggen waarom dit niet werkt?
document.getElementById('uploadForm').addEventListener('submit', uploadImages);

function uploadImages(e){
e.preventDefault();
var input = document.getElementById('uploadFiles');

var filesToUpload = input.files;

for(var i=0; i<filesToUpload.length; i++){
var file = filesToUpload[i];

if(!file.type.match('image')) continue;

var img = document.createElement("img");

var reader = new FileReader();

reader.addEventListener("load",function(e) {
img.src = e.target.result

var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);

var dataurl = canvas.toDataURL("image/png");

var fd = new FormData();
fd.append('image', dataurl);

var myRequest = new XMLHttpRequest();
myRequest.open("POST", "upload.php", true);
myRequest.send(fd);

myRequest.onreadystatechange = function(){
if(myRequest.readyState==4 && myRequest.status==200){
document.getElementById("result").innerHTML = myRequest.responseText;
}
}

console.log(dataurl);
});
reader.readAsDataURL(file);
}
}


Ik krijg hele kleine plaatjes, een stukje van linksboven van de originele afbeelding?

Reageren

Inloggen om te reageren