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

基于HTML5的移动端图片压缩上传方法研究 　　摘 要 　　本文介绍了一种基于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 = img.naturalWidth； 　　var fH = img.naturalHeight； 　　var X = 0；var Y = 0； 　　if （cH * fW cW * fH） { 　　X = Math.round（（fW - cW * fH / cH） / 2）； 　　} 　　else { 　　Y = Math.round（（fH - cH * fW / cW） / 2）； 　　} 　　var W = Math.round（X 0 ？ fW - X * 2 ： fW）； 　　var H = Math.round（Y 0 ？ fH - Y * 2 ： fH）； 　　var cvs = document.createElement（canvas）； 　　cvs.width = cW；cvs.height = cH； 　　ctx = cvs.getContext（2d）.drawImage（img， X， Y， W， H， 0， 0， cW， cH）； 　　var nD = cvs.toDataURL（mime_type， quality / 100）； 　　var rst = new Image（）； 　　rst.src = nD； 　　return rst； 　　} 　　}； 　　压缩调用：press（tmpimg， quality）； 　　（4）异步上传 　　压缩后的图片通过JQuery实现异步上传。 　　（5）服务器端保存 　　使用C#实现 　　protected void Page_Load（object sender， EventArgs e） 　　{ 　　Response.Clear（）； 　　string fname= System.DateTime.Now.Ticks.ToString（）+.jpg； 　　if （Request[name] ！= null）{ 　　string sP = Server.MapPath（～/img/）； 　　try { 　　FileStream fs = File.Create（sP + / + fname）； 　　byte[] bytes = Convert.FromBase64String（））； 　　string D