我有一个web应用程序正在运行,它使用ajax上传。问题是最近用户上传了太大的图像,导致上传时间变长,用户在抱怨。所以我想到的是,通过js裁剪和调整图像大小,然后再通过ajax上传发送到服务器,这样可以减少时间。那么有没有办法做到这一点?有什么思路吗?
我有一个web应用程序正在运行,它使用ajax上传。问题是最近用户上传了太大的图像,导致上传时间变长,用户在抱怨。所以我想到的是,通过js裁剪和调整图像大小,然后再通过ajax上传发送到服务器,这样可以减少时间。那么有没有办法做到这一点?有什么思路吗?
解决方法是使用像FileReader和Canvas这样的现代方式(但这仅适用于最新的现代浏览器)。
在这个例子中,我展示了如何通过设置最大宽度和高度来保持纵横比,让客户端在上传前调整图像大小。
在这个例子中,最大宽度为64;最终图像是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>
在代码的画布部分,您还可以添加裁剪功能。
根据评论要求进行编辑
c.toDataURL();
如果图像是以 base64 字符串的形式存在,您可以将其存储在一个隐藏的输入框中,追加到 new FormData()
中或者任何您想要的地方。
在服务器上处理。
$data=explode(',',$base64_string);
$image=base64_decode($data[1]);
写入文件
$f=fopen($fileName,"wb");
fwrite($f,$image);
fclose($f);
或者$gd=imagecreatefromstring($image);
您还可以将整个Base64图像字符串存储在数据库中并始终使用该字符串。