《小白HTML5成长之路51》canvas压缩图片上传功能的原理

"朱哥，昨天试了几把图片上传的功能，感觉还不错，不过有个小问题！"

老朱：“什么问题？”

小白：“小图片上传还好说，大图片上传的时候经常会卡顿一下。”

老朱：“恩，很多人上传图片的时候都是直接上传原图的，很多相机照的原图大小都在4M左右，上传的图片如果都是这么大，不但用户觉得你的网站速度慢，还非常占服务器空间。”

小白：“哦，确实是，很多人压根不知道自己上传的图片到底有多大。”

老朱：“所以我们要让用户进行傻瓜式操作，图片压缩的功能就必不可少。今天我们就用canvas来做一下图片压缩的处理。我们在昨天的基础上增加canvas功能就可以了。”

老朱：“在缩略图下面增加一个canvas，canvas有一个toDataURL方法，可以把当前的canvas绘制的内容进行图片压缩并转换为base64编码，有了base64编码我们就可以发送给图片上传的php页面进行图片上传了。”

老朱继续说道：“知道了压缩的方法，我们只需要解决如果把选择的文件绘制到canvas上面就可以了。还记得我们之前绘制图片的时候用到的Image对象么？”

“记得，绘制图像的时候需要实例化一个Image对象，然后设定Image对象的图片地址src，当图片加载完成以后把图片绘制到canvas上。”

老朱：“恩，流程还记得，不错。Image对象的src属性也可以接收图片base64编码，因此我们可以这样来做。”

“这里我把canvas的宽度设定在500像素，高度根据图片高度进行等比例变化，你可以看一下绘制的效果。”

你看看这张图片的原始大小信息：

“现在通过imgdata=canvas.toDataURL('image/jpeg',0.3);把canvas信息压缩并转为base64编码存到imgdata里面，然后通过jQuery的ajax把imgdata发送给图片上传的php页面就可以了。”

“通过canvas上传以后图片的大小下降到9.65K，应该说是没非常理想了。通过canvas压缩后上传最大的好处是图片在客户端进行处理，处理好以后再往服务器发送，这样传输的数据大小就非常小了。”

老朱最后说：“刚刚我们通过canvas实现了图片压缩上传，真正开发的时候情况会比这个稍微复杂点，我跟你大概说一下，你记住就行了。1、动态生成canvas，这样做的好处是canvas不会显示在页面上。2、判断图片大小，如果图片大小比较小不用压缩直接上传就可以，图片大再进行压缩。3、有时你可能需要隐藏input file，比如上传头像的功能，用户点击头像进行选择图片上传，这时就需要通过点击头像的事件调用input file的点击事件来选择图片。这几个技巧你有时间了可以自己实现一下，不是特别麻烦，我们之前学过的知识足够你解决它们了。”

想学H5的朋友可以关注老炉，您的关注是我持续更新《小白HTML5成长之路》的动力！