前端图片处理

前端图片处理是指：不通过服务器，在客户端直接通过js操作图片，包括 显示上传的图片，缩放图片，裁剪图片，滤镜处理等。

以下例子演示了，将 input file 标签选择的图片显示到页面上：

经过试验，其实前端图片处理的瓶颈 就这么点代码

这段代码解决了  将input标签选择的图片直接显示到页面上（而不经过服务器）

这个关键问题解决了，一切都好办了，之后所有的图片处理就可以交给强大的canvas了，可参考这个网址点我

 这得益于html5的FileReader对象，在html5之前，js确实是没有办法取到input file 标签选择的二进制文件数据，现在使用这个对象，就可以将用户选择的二进制数据获取成base64

 

现在我们只是把图片简单地显示出来了，但需求并不满足于此，通常我们希望将用户选择的图片先压缩，再上传到服务器，因此接下来要做的就是前端图片压缩。下面是一个前端图片压缩库，是我修改别人的： http://url.cn/SJOZj4  http://yunpan.cn/cHaMTWnLUqdw8 访问密码 0c2e ，该库做的事就是：把input file 提供的本地图片或是链接提供的网络图片 压缩到特定尺寸，和特定的质量，输出base64格式的数据。

转载于:https://www.cnblogs.com/muguanglj/p/4863275.html