基于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 = img.naturalWidth；
        var fH = img.naturalHeight；
        var X = 0；var Y = 0；
        if （cH * fW > cW * fH） {
        X = und（（fW - cW * fH / cH） / 2）；
        }
        else {
        Y = und（（fH - cH * fW / cW） / 2）；
        }
        var W = und（X > 0 ？ fW - X * 2 ： fW）；
        var H = und（Y > 0 ？ fH - Y * 2 ： fH）；
        var cvs = ateElement（'canvas'）；
        cvs.width = cW；cvs.height = cH；
        ctx = Context（"2d"）.drawImage（img， X， Y， W， H， 0， 0，jquery实现ajax cW， cH）；
        var nD = DataURL（mime_type， quality / 100）；
        var rst = new Image（）；
        rst.src = nD；
        return rst；
        }
        }；
        压缩调用：jicpress（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 DataString= Request["data"].Substring（Request["data"].IndexOf（"，"）+1）；
        fs.Write（bytes， 0， bytes.Length）；
        fs.Close（）；
        Response.Write（fname）；
        }
        catch （Exception except）
        {
        Response.Write（"上传失败！"）；
        }
        }
        Response.Flush（）；
        Response.End（）；
        }
        2.3 改进空间
        在实际应用中，开发者要考虑到不同手机的图片处理方式不同而做相应处理，例如苹果系统和安卓系统的图片显示和存储与存在一定的差异。所以，在脚本中应该增加浏览器的平台监测和兼容性检测，通过一些脚本处理不同平台的图片，提高本方法的平台兼容性。
        3 结束语
        基于HTML5的Canvas对象对图片进行压缩的方法，适用于手机的移动网站和各类移动应用的开发，对增强用户体验，减轻服务器压力有一定的实际意义。
        作者单位
        黑龙江东方学院 黑龙江省哈尔滨市 150060

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。