• 博客园logo
  • 会员
  • 众包
  • 新闻
  • 博问
  • 闪存
  • 赞助商
  • HarmonyOS
  • Chat2DB
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录
muguang_lijing
博客园    首页    新随笔    联系   管理    订阅  订阅

前端图片处理

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

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

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

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

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

 这得益于html5的FileReader对象,在html5之前,js确实是没有办法取到input file 标签选择的二进制文件数据,现在使用这个对象,就可以将用户选择的二进制数据获取成base64
 
现在我们只是把图片简单地显示出来了,但需求并不满足于此,通常我们希望将用户选择的图片先压缩,再上传到服务器,因此接下来要做的就是前端图片压缩。下面是一个前端图片压缩库,是我修改别人的:http://url.cn/SJOZj4 http://yunpan.cn/cHaMTWnLUqdw8 访问密码 0c2e ,该库做的事就是:把input file 提供的本地图片或是链接提供的网络图片 压缩到特定尺寸,和特定的质量,输出base64格式的数据。
posted @ 2015-10-09 10:48  muguang_lijing  阅读(1143)  评论(0)    收藏  举报
刷新页面返回顶部
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3