通过Javascript调整图像大小
Image resize by Javascript
我已经运行了web应用程序。它使用ajax上传。问题是最近用户上传的图片太大。所以这需要更多的时间。用户对此颇有怨言。所以我想的是,"如果我通过js裁剪并调整图像大小,然后通过ajax上传将其发送到服务器,那么时间就会减少"。那么有什么办法可以做到这一点吗?有什么想法吗?
解决方案是使用现代方式,如FileReader和Canvas(但这仅适用于最新的现代浏览器)。
http://caniuse.com/filereader
http://caniuse.com/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();
是基于图像的64_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图像字符串存储在数据库中,并始终使用它。
相关文章:
- 客户端图像调整大小.任何已知问题
- TinyMCE图像调整大小模式
- 将特定html文件上的幻灯片图像调整为移动屏幕
- 如何使用 jquery 和 css 在固定标题导航栏中将头像图像调整为较小的图像
- 在 JavaScript 中编辑 blob 图像(调整大小并添加边框)
- JavaScript图像调整大小窗口
- 多个图像调整大小并上传说明
- 将未知大小的图像调整为特定大小而不裁剪.(信箱)
- JQuery 图像调整器和文本操纵器
- 想要使用 html5 的画布优化捕获的图像调整大小和旋转的代码,现在在移动设备上发出内存不足警告
- 客户端图像调整大小并保存
- jQuery图像调整大小以适应模态的问题
- 获取将图像调整为其容器大小的脚本的名称+其他功能
- html5画布图像调整大小
- 当主图像调整大小时,使顶部图像保持原位
- Javascript将图像调整为不同的大小,其中只有宽度很重要
- 图像调整与javascript没有视觉干扰
- 图像调整大小NaN错误
- 将图像调整大小/拉伸到只有在页面加载后才知道的尺寸
- 在WebKit浏览器中,图像调整会产生轻微的、短暂的像素化