基于HTML5的移动端图片压缩上传方法研究

admin管理员组

文章数量:1539786

2024年3月23日发(作者：)

龙源期刊网

基于HTML5的移动端图片压缩上传方法研

究

作者：张翼

来源：《电子技术与软件工程》2015年第15期

摘 要

本文介绍了一种基于HTML5的移动客户端图片压缩方法。该方法不需要安装任何第三方

组件，通过JavaScript和Canvas对象，实现图片的压缩，通过JQuery实现压缩后图片的异步

上传，服务器端使用C#将图片转存。该方法在移动网站和应用开发领域有很强的实用意义。

【关键词】HTML5 图片压缩 移动应用

1 传统移动端图片压缩方法

传统HTML4和JavaScript由于浏览器沙箱限制，不能在客户端处理图片，只能将图片上

传到服务器然后，再进行压缩处理。所以，解决移动端图片压缩问题通常有下面几种方法：

（1）使用专门设计的App，对图片进行压缩处理后上传。（2）使用第三方图片处理软

件，对图片进行压缩后上传。（3）利用手机内置拍照软件，对图片的大小进行设置，然后拍

照上传。

上面几种方法，在移动应用开发尤其是B/S结构应用开发时，都存在着需要用户另行对手

机或App应用进行设置的问题，操作繁琐降低了用户体验。

2 基于HTML5的图片压缩方法

HTML5是万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言

（HTML）的第五次重大修改。HTML5有着很好的网页多媒体特性，对三维及二维图形处理

有很好的支持。目前，移动端的主流浏览器对HTML5都有一定的支持。因此，使用HTML5

和JavaScript在客户端对图片压缩，具有很好的跨平台性和实用意义。

2.1 基本思路

基于HTML5的图片方法的基本思路是利用HTML5的input[type=file]组件选择图片，使

用FileReader对象读取选中图片数据，使用Canvas标签的DrawImage方法将图片剪裁到指定

大小，使用Canvas的toDataURL方法按照指定质量将图片数据转换成Base64编码，最后，通

过Ajax异步通信，将图片数据发送到服务器端，服务器端接收并保存图片，从而实现图片压

缩上传。

龙源期刊网

2.2 实现方法

（1）页面添加文件选择组件

（2）监听文件组件的change事件并读取图片内容

（3）图片压缩及调用

var jic = { compress： function（img， quality， output_format） {

var fW = lWidth；

var fH = lHeight；

var X = 0；var Y = 0；

if （cH * fW > cW * fH） {

X = （（fW - cW * fH / cH） / 2）；

}

else {

Y = （（fH - cH * fW / cW） / 2）；

}

var W = （X > 0 ？ fW - X * 2 ： fW）；

var H = （Y > 0 ？ fH - Y * 2 ： fH）；

var cvs = Element（'canvas'）；

= cW； = cH；

ctx = text（"2d"）.drawImage（img， X， Y， W， H， 0，

var nD = URL（mime_type， quality / 100）；

var rst = new Image（）；

， cW，）； 0 cH

龙源期刊网

= nD；

return rst；

}

}；

压缩调用：ss（tmpimg， quality）；

（4）异步上传

压缩后的图片通过JQuery实现异步上传。

（5）服务器端保存

使用C#实现

protected void Page_Load（object sender， EventArgs e）

{

（）；

string fname= ng（）+".jpg"；

if （Request["name"] ！= null）{

string sP = h（"～/img/"）；

try {

FileStream fs = （sP + "/" + fname）；

byte[] bytes = se64String（））；

string DataString= Request["data"].Substring（Request["data"].IndexOf（"，"）+1）；

（bytes， 0， ）；

（）；

（fname）；

龙源期刊网

}

catch （Exception except）

{

（"上传失败！"）；

}

}

（）；

（）；

}

2.3 改进空间

在实际应用中，开发者要考虑到不同手机的图片处理方式不同而做相应处理，例如苹果系

统和安卓系统的图片显示和存储与存在一定的差异。所以，在脚本中应该增加浏览器的平台监

测和兼容性检测，通过一些脚本处理不同平台的图片，提高本方法的平台兼容性。

3 结束语

基于HTML5的Canvas对象对图片进行压缩的方法，适用于手机的移动网站和各类移动

应用的开发，对增强用户体验，减轻服务器压力有一定的实际意义。

作者单位

黑龙江东方学院 黑龙江省哈尔滨市 150060

本文标签： 图片压缩方法移动应用