\"大众朱哥，昨天试了几把图片上传的功能，觉得还不错，不过有个小问题！
\公众
老朱：“什么问题？”
小白：“小图片上传还好说，大图片上传的时候常常会卡顿一下。”
老朱：“恩，很多人上传图片的时候都是直接上传原图的，很多相机照的原图大小都在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发展之路》的动力！
