web app 开发之图片压缩

   web app开发中会有很多图片上传的应用场景，而现在的图片很多是由手机拍摄的，随着手机像素的增大，现在一般手机拍摄的图片都是几M的大小，如果直接上传，在网速差的情况下上传时间是个很大的问题，而且用户在查看时一个页面就加载好多张几M大小的图片，而现在的流量资费相对不那么便宜。对于用户清晰度要求不那么高的图片，我们应该要提供压缩功能，这才能对用户更加友好。

  图片压缩，我采用的是HTML5中的canvas（画布）功能，这个功能的具体用法可以从w3csool中学习，链接在下http://www.w3school.com.cn/html5/html_5_canvas.asp

  在上一篇博文中，我写了一个图片上传预览的HTML，我们可以直接修改那次的代码就好了。

  因为用户有时就是想用原来的图片，所以我们添加radio标签，提供“原图”和“压缩图”的选项供用户选择。

  话不多说，上代码！

 

这是html部分的代码，所得到的显示效果是这样的：

下面来看看JS部分的代码：

如何获得上传图片的url在上篇博文中已经讲过这里就不赘述了，这里主要的思路就是将上传的图片放到一个隐藏的div中，根据用户选择“原图”还是“压缩图”在图片预览的

div中进行显示。

显示原图就直接把获得的原图url给到预览图img标签的src就可以了，我们来说说压缩图部分。

绘制压缩图封装在drawCompressionPicture这个函数中，

var preview_canvas = document.getElementById("previewCanvas");
var preview_ctx = preview_canvas.getContext("2d");

这两句是找到id为previewCanvas的画布，并对这个画布生成一支名为preview_ctx的画笔。

最关键的就是preview_ctx.drawImage(image, 0, 0, 260, height);这条语句，它的意思是将image这个图像画到画布中，并确定画的起点和长宽，这里我是以0,0为其始，也就是这个画布的左上角顶点开始画，宽为260，高为height，这里var height = image.height / (image.width / 260);就保证了画出的图它的长宽比是没有变的，图片就不会变形。

下面我们来看看效果：

原图：

压缩图：

我们把两张图片保存下来看看图片大小：

可以看出图片压缩了1/3，各位可以自行调节preview_ctx.drawImage(image, 0, 0, 260, height)的参数得到自己想要的尺寸和压缩比，这也是得到统一尺寸图片的一种方法。

最后，得到了压缩图如何上传到服务器呢，我们用

var image_data = preview_canvas.toDataURL("image/png");

这条语句可以得到画布中图片的编码，我们用alert(image_data)；可以看得编码：

这并不是标准的二进制编码，而是base64编码，这个上传到服务器中可以用相应的base64解码得到二进制文件存到数据库中，也可以转成图片存在文件夹中。

我是用python写后台，插入的库为：

import base64

用image = base64.b64decode(image_data)语句就可以得到相应的二进制数据了，其它语言的后台也有相应的方法，大家自行谷歌了～

接下来的博文可能会和大家分享下图片如何存到数据库中，一起学习，欢迎拍砖～