关于客户端JS能否等比例压缩图片的请教

全麦切片
  • 83

当用户通过浏览器上传图片时,不管用户用了多大的图片,都使其能够上传,现在想用JS先在浏览器上对图片进行压缩处理,然后上传,而不是将整个图片上传到后台服务器然后在压缩后存储。请问这种方案是否可行?新浪微博在上传图片的时候是怎样一种解决方案?请各路大牛不吝赐教!谢谢。

回复
阅读 21.3k
8 个回答
✓ 已被采纳

如果要所有运算都在客户端通过js完成,目前只有html5的canvas和file api才能满足你的需要。但是对国内用户来说,支持html5的浏览器普及率还不够高。

新浪微博的图片上传使用的是图片上传后然后,再在服务器端压缩的方法,实际上这种方式的消耗也很少。目前普遍上使用的都是这种方式,因为只需要在上传的时候压缩一次。

<script language="JavaScript" type="text/javascript"> 
function DrawImage(ImgD,FitWidth,FitHeight) 
{ 
var image=new Image(); 
image.src=ImgD.src; 
	if(image.width>0 && image.height>0) 
	{ 

		if(image.width>FitWidth) 
		{ 
			ImgD.width=FitWidth; 
			ImgD.height=(image.height*FitWidth)/image.width; 
			if(ImgD.height>FitHeight)
			{
				ImgD.height=FitHeight; 
				ImgD.width=(image.width*FitHeight)/image.height; 
			}
		} 
		else if(image.height>FitHeight) 
		{ 
			ImgD.height=FitHeight; 
			ImgD.width=(image.width*FitHeight)/image.height; 
			if(image.width>FitWidth)
			{
				ImgD.width=FitWidth; 
				ImgD.height=(image.height*FitWidth)/image.width; 
			}
		}
		else
		{ 
			ImgD.width=image.width; 
			ImgD.height=image.height; 
		} 
	} 
} 
</script>

最近做一个页面时用到的,不知道符不符合你的需求!

也可以考虑用flash去实现压缩上传的功能

python的话,直接用PIL在服务器端处理就可以了,没必要做在客户端用js做

客户端的js改变图片的宽度和高度 是很难做到效果漂亮的,大部分情况都是服务器端语言压缩的

家有萌虎
  • 3
新手上路,请多包涵

https://github.com/think2011/LocalResizeIMG

我是基于这位大神的代码,完成了客户端头像截取,压缩,旋转

跟你说说主要会遇到的问题

手机拍的图片会在 图片 exif 里面保存图片方向,所以要在客户端先将图片进行相应的旋转

压缩过的图片只能通过 base64 上传

gepp2010
  • 1
新手上路,请多包涵

请问家有萌虎,关于exif 那里如何实现的

imwinlion
  • 2
新手上路,请多包涵

关于JS前端图片压缩 这里有详细的方案
http://www.imwinlion.com/archives/158
摘录一段如下,应该是你想要的

这个场景的难点在于图片压缩,为什么是图片前端压缩?首先,因为当前用户基本上是大屏手机,一个图1-4M,是很正常的,但是用户参与活动的时候,未必愿意花这个流量,这样这个活动关上传图片这一步,就会降低很多用户参与的欲望了。其次,用户的网络状态未必很好,虽然用户3G很普遍,4G成规模,WIFI热点也很多,但是上传这么大的一张图,以2M估算,每秒上传速度100KB,也要20秒,难保这20秒时间网络不出任何差错。再次,用户未必愿意等待这么长的时间。解决方案在哪里?,答案是前端压缩,这里笔者常用的插件是lrz下载地址如下,也给个demo

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏