菜单

基于HTML5的图片压缩方法

2015年8月8日 - 未分类

HTML5 是万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次修改。
HTML5 有着很好的网页多媒体特性,对三维及二维图形处理有很好的支持。目前,移动端的主流浏
览器对 HTML5 都有一定的支持。因此,使用HTML5 和 Java Script 在客户端对图片压缩,具有很好的跨平台性和实用意义。

传统移动端图片压缩方法
传统 HTML4 和 Java Script 由于浏览器沙箱限制,不能在客户端处理图片,只能将图片
上传到服务器然后,再进行压缩处理。所以,解决移动端图片压缩问题通常有下面几种方
法:
(1)
使用专门设计的 App,对图片进行压缩处理后上传。
(2)
使用第三方图片处理软件,对图片进行压缩后上传。
(3)
利用手机内置拍照软件,对图片的大小进行设置,然后拍照上传。
上面几种方法,在移动应用开发尤其是B/S 结构应用开发时,都存在着需要用户另行
对手机或 App 应用进行设置的问题,操作繁琐降低了用户体验。

在实际应用中,开发者要考虑到不同手机的图片处理方式不同而做相应处理,例如苹果系统和安卓系统的图片显示和存储与存在一定的差异。所以,在脚本中应该增加浏览器的平台监测和兼容性检测,通过一些脚本处理不同平台的图片,提高本方法的平台兼容性。

基于HTML5的图片压缩方法》有1个想法

王怀毅


1
)页面添加文件选择组件
2
)监听文件组件的
change
事件并读取
图片内容

3
)图片压缩及调用
var jic = { compress: function(img, quality,
output_format) {
var f W = img.natural Width;
var f H = img.natural Height;
var X = 0;var Y = 0;
if (c H * f W > c W * f H) {
X = Math.round((f W – c W * f H / c H) / 2);
}
else {
Y = Math.round((f H – c H * f W / c W) / 2);
}
var W = Math.round(X > 0 ? f W – X * 2 :
f W);
var H = Math.round(Y > 0 ? f H – Y * 2 : f H);
var cvs = document.create Element(‘canvas’);
cvs.width = c W;cvs.height = c H;
ctx = cvs.get Context(“2d”).draw Image(img,
X, Y, W, H, 0, 0, c W, c H);
v a r n D = c v s . t o D a t a U R L ( m i m e _ t y p e ,
quality / 100);
var rst = new Image();
rst.src = n D;
return rst;
}
};

评论已关闭。