Dataverkeer foto's uploaden en verkleinen?
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
https://hacks.mozilla.org/2011/01/how-to-develop-a-html5-image-uploader/
Gewijzigd op 14/10/2014 11:07:23 door - Ariën -
- Aar - op 14/10/2014 11:06:18:
Natuurlijk kan je ze al verkleinen voordat je ze upload. Gewoon omzetten naar een canvas-element en die dan uploaden.
https://hacks.mozilla.org/2011/01/how-to-develop-a-html5-image-uploader/
https://hacks.mozilla.org/2011/01/how-to-develop-a-html5-image-uploader/
Oke, met Javascript.
Ik zal me hier eens in verdiepen, bedankt.
Trouwens als het zo natuurlijk voor mij is zou ik de vraag niet stellen.
- 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?
Quote:
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;
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);
}
}[/quote]
Ik krijg hele kleine plaatjes, een stukje van linksboven van de originele afbeelding?
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;
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);
}
}[/quote]
Ik krijg hele kleine plaatjes, een stukje van linksboven van de originele afbeelding?