图像通过Javascript调整大小

时间:2013-07-06 08:23:18

标签: javascript upload image-uploading

我正在运行网络应用。它使用ajax上传。问题是最近用户上传了太大的图片。所以需要花费更多时间。用户抱怨这一点。所以我在想的是,'如果我以某种方式通过js裁剪并调整图像大小,然后通过ajax上传将其发送到服务器,那么时间将减少'。有没有办法做到这一点?有什么好主意吗?

1 个答案:

答案 0 :(得分:15)

解决方案是使用FileReader和Canvas等现代方法(但这仅适用于最新的现代浏览器)。

http://caniuse.com/filereader

http://caniuse.com/canvas

在此示例中,我将展示如何让客户端在上传前调整图片大小,方法是设置最大宽度&高度保持宽高比。

在此示例中,max widthHeight = 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_string,您可以将其存储在隐藏的输入中,附加到new FormData()或任何您想要的位置。

在服务器上

$data=explode(',',$base64_string);
$image=base64_decode($data[1]);

写入文件

$f=fopen($fileName,"wb");
fwrite($f,$image); 
fclose($f);

$gd=imagecreatefromstring($image);

您还可以将整个base64图像字符串存储在数据库中,并始终使用它。