主要用了两个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. http request GET 乱码分析

    提交一个GET请求 在浏览器地址栏或搜索框输入地址:http://www.baidu.com/content/衣服?keyword=衬衣 其中的中文会被浏览器进行编码,具体编码情况请参考阮大神:关于U ...

  2. BZOJ2599 IOI2011Race

    题目:一棵树,每条边有权.求一条路径,权值和等于K,且边的数量最小. 点分治,我们考虑经过根节点的路径,t[x]表示路径长为x时最少的边数,然后每次拿栈记下来清空. 注意先搜索再更新,这样可以避免同一 ...

  3. POJ 1509 Glass Beads 后缀自动机 模板 字符串的最小表示

    http://poj.org/problem?id=1509 后缀自动机其实就是一个压缩储存空间时间(对节点重复利用)的储存所有一个字符串所有子串的trie树,如果想不起来长什么样子可以百度一下找个图 ...

  4. POJ 1655 BalanceAct 3107 Godfather (树的重心)(树形DP)

    参考网址:http://blog.csdn.net/acdreamers/article/details/16905653   树的重心的定义: 树的重心也叫树的质心.找到一个点,其所有的子树中最大的 ...

  5. 【费用流】BZOJ1927-[Sdoi2010]星际竞速

    [题目大意] 有一些点,它们之间存在一些有向边(由编号小的到编号大的),从一点到另一点消耗时间为边长.也可以消耗Ti时间直接抵达任意一个点.问所有点都走一遍最少需要多少时间? [思路] ①将每个点i拆 ...

  6. AOP 面向切面 记录请求接口的日志

    AOP为Aspect Oriented Programming的缩写,意为:面向切面编程,通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术.AOP是OOP的延续,是软件开发中的一个热点, ...

  7. 【8.19校内测试】【背包】【卡特兰数】【数位dp】

    早上随便搞搞t1t3就开始划水了,t2一看就是组合数学看着肚子疼...结果t1t3都a了??感天动地. 从小到大排序,从前到后枚举i,表示i是整个背包中不选的物品中代价最小的那个,即i不选,1到i-1 ...

  8. bzoj 1012 BST 支持插入，区间最大

    水... /************************************************************** Problem: 1012 User: idy002 Lang ...

  9. bzoj 3298: [USACO 2011Open]cow checkers -- 数学

    3298: [USACO 2011Open]cow checkers Time Limit: 10 Sec  Memory Limit: 128 MB Description 一天,Besssie准备 ...

  10. HDU 5292 Pocket Cube 结论题

    Pocket Cube 题目连接: http://acm.hdu.edu.cn/showproblem.php?pid=5292 Description Pocket Cube is the 2×2× ...