主要用了两个html5的 API，一个file，一个canvas，压缩主要使用cnavas做的，file是读取文件，之后把压缩好的照片放入内存，最后内存转入表单下img.src，随着表单提交。

照片是自己用单反拍的，5M多，压缩下面3张分别是600多kb，400多kb，300kb的最后那张失真度很大了，压缩效率蛮高的。

。。。。。(代码请查看原文)

阅读原文：使用HTML5的两个api，前端js完成图片压缩

使用HTML5的两个api，前端js完成图片压缩的更多相关文章

  1. 利用HTML5，前端js实现图片压缩

    http://blog.csdn.NET/qazwsx2345/article/details/21827553 主要用了两个HTML5的 API,一个file,一个canvas,压缩主要使用cnav ...

  2. 前端JS转图片为base64并压缩、调整尺寸脚本

    image to base64 to blob //////////////////////////////////////////////////////////////////////////// ...

  3. js/vue图片压缩

    js版 新建compressImage.js,内容如下: // 将base64转换为blob(有需要可加上,没需要可不加) function convertBase64UrlToBlob(urlDat ...

  4. js框架Modernizr是什么东西？ 他是前端开发HTML5和CSS3的强有力前端js检测类库

    最近在研究modernizr的前端框架,发现这个Modernir对前端写页面非常友好,并且能够很快的建立起适应任何设备的html页面哦.在这里分享下基础教程,让大伙对modernizr是什么?做什么用 ...

  5. js 实现图片压缩并转换成base64(data:image/jpeg;base64)格式

    <!DOCTYPE html> <html> <head> <!--by 0o晓月メ http://www.cnblogs.com/final-elysion ...

  6. js canvas图片压缩

    function preview_picture(pic){ var r=new FileReader(); r.readAsDataURL(pic); r.onload=function(e){ d ...

  7. HTML5 file API加canvas实现图片前端JS压缩并上传

    一.图片上传前端压缩的现实意义 对于大尺寸图片的上传,在前端进行压缩除了省流量外,最大的意义是极大的提高了用户体验. 这种体验包括两方面: 由于上传图片尺寸比较小,因此上传速度会比较快,交互会更加流畅 ...

  8. 前端Js框架汇总

    概述: 有些日子没有正襟危坐写博客了,互联网飞速发展的时代,技术更新迭代的速度也在加快.看着Java.Js.Swift在各领域心花路放,也是煞是羡慕.寻了寻.net的消息,也是振奋人心,.net co ...

  9. HTML5 postMessage 和 onmessage API 具体应用

    HTML5 postMessage 和 onmessage API 具体应用 随着 HTML5 的发展.了解并熟悉 HTML5 的 API 接口是很重要的.postMessage(send) 和 on ...

随机推荐

  1. 【数学】Codeforces Round #470 (Div2) B

    题目链接:http://codeforces.com/contest/948/problem/B 题目大意:有一个大于等于3的数X0,任意选择一个小于X0的质数P0,乘以一个数k使k*P0>=X ...

  2. 树论讲解——最近公共祖先（lca）

    最近公共祖先?! 有人肯定要问:什么是最近公共祖先???!! 好那我们现在就来说说什么是最近公共祖先吧! 最近公共祖先有一个好听的名字叫——lca 这是一种算法,这个算法基于并查集和深度优先搜索.算法 ...

  3. Oracle意外赢官司，程序员或过苦日子

    关于“Google在Android平台使用Java侵犯知识产权”一案,2014年5月,联邦法院判定Oracle获胜,这个结果完全出人意料,因为这样一来无异于打开了软件开发领域中API使用方式的潘多拉之 ...

  4. React Native 系列(九)

    前言 本系列是基于React Native版本号0.44.3写的.很多的App都使用了Tab标签组件,例如QQ,微信等等,就是切换不同的选项,显示不同的内容.那么这篇文章将介绍RN中的Tab标签组件. ...

  5. [NOIP2017]列队(线段树/裂点splay)

    考虑n=1的做法,就是支持: 1.在线删一个数 2.在结尾加一个数 3.查询序列的第y个数 用线段树记录区间内被删元素的个数,可以通过线段树上二分快速得解,对于新增的数,用vector记录即可. 对于 ...

  6. [CodeForces-797F]Mice and Holes

    题目大意: 在一条直线上,有n个老鼠,m个洞. 每个老鼠i都有一个初始位置x[i]. 每个洞i都有一个固定位置p[i]和容量限制c[i]. 求所有老鼠都进洞的最小距离总和. 思路: 动态规划. 用f[ ...

  7. hdu 1565 最小割

    黑白染色,源指向白,黑指向汇,容量都是方格中数的大小,相邻的格子白指向黑,容量为oo,然后求一次最小割. 这个割是一个简单割,如果只选择不在割中的点,那么一种割就和一个选数方案一一对应,割的大小就是不 ...

  8. Codeforces Round #346 (Div. 2) A. Round House 水题

    A. Round House 题目连接: http://www.codeforces.com/contest/659/problem/A Description Vasya lives in a ro ...

  9. Git 中文件的状态和流转区

    Git的文件主要处于三种状态,分别是 staged, modified, committed. Git文件流转有三个区域,分别是 工作区域. 索引区域. 本地数据区域. 要修改对一个文件进行操作,首先 ...

  10. mysql 5.7源码安装

    http://blog.itpub.net/29733787/viewspace-1590891/