I've web app running. And it uses ajax upload. The issue is recently users are uploading too big images. So it's taking a bit more time. Users are complaining about that. So what I was thinking is this, 'If I somehow crop and resize the image via js and then send it to the server via ajax upload then the time will be reduced'. So is there any way to do that? Any idea for it?
3
-
1Why don't you just put a limit on filesize and dimensions?elclanrs– elclanrs2013-07-06 08:25:01 +00:00Commented Jul 6, 2013 at 8:25
-
possible duplicate, even if quite old still holds in the point stackoverflow.com/questions/2434458/…DRC– DRC2013-07-06 08:26:18 +00:00Commented Jul 6, 2013 at 8:26
-
1Putting limit will force the user to modify it himself. But it will loose the site subscriptions.Mazhar Ahmed– Mazhar Ahmed2013-07-06 08:27:22 +00:00Commented Jul 6, 2013 at 8:27
Add a comment
|
1 Answer
A solution is to use modern ways like FileReader and Canvas (But this works only on the latest modern browsers).
In this example i show how to let the client resize an image before uploading by setting a max width & height mantaining aspect ratio.
In this example max widthHeight = 64; your final image is c.toDataURL();
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
var h=function(e){
var fr=new FileReader();
fr.onload=function(e){
var img=new Image();
img.onload=function(){
var MAXWidthHeight=64;
var r=MAXWidthHeight/Math.max(this.width,this.height),
w=Math.round(this.width*r),
h=Math.round(this.height*r),
c=document.createElement("canvas");
c.width=w;c.height=h;
c.getContext("2d").drawImage(this,0,0,w,h);
this.src=c.toDataURL();
document.body.appendChild(this);
}
img.src=e.target.result;
}
fr.readAsDataURL(e.target.files[0]);
}
window.onload=function(){
document.getElementById('f').addEventListener('change',h,false);
}
</script>
</head>
<body>
<input type="file" id="f">
</body>
</html>
In the canvas part of the code you can also add a cropping function.
Edit as asked in the comments
c.toDataURL();
is the image base64_string you can store it in a hidden input,append to a new FormData() or wherever you want.
on the server
$data=explode(',',$base64_string);
$image=base64_decode($data[1]);
write to file
$f=fopen($fileName,"wb");
fwrite($f,$image);
fclose($f);
or
$gd=imagecreatefromstring($image);
you can also store the whole base64 image string in the database and always use that.
3 Comments
ilter
This code is appending an img tag inside DOM, as soon as we choose the file. How about uploading that image to server by a click of a button? I guess we need to get that image to a stream and upload that stream to the server? How to convert this stream on the server to create an image file, then?
ilter
I am a .net guy :) But thanks for the codes, I am sure someone will benefit from these ;)
cocco
use .net to decode base64, but first split/explode the string with a comma the second part is the data you want.