主要用了两个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. python笔记11-多线程之Condition（条件变量）

    前言 当小伙伴a在往火锅里面添加鱼丸,这个就是生产者行为:另外一个小伙伴b在吃掉鱼丸就是消费者行为.当火锅里面鱼丸达到一定数量加满后b才能吃,这就是一种条件判断了. 这就是本篇要讲的Condition ...

  2. django celery(QQ蓝鲸)

    官方:http://www.celeryproject.org 文档:http://docs.jinkan.org/docs/celery/index.html FAQ:http://docs.cel ...

  3. android remoteView

    韩梦飞沙  韩亚飞  313134555@qq.com  yue31313  han_meng_fei_sha remoteView  可以在 appWidget 和 notification 中 使 ...

  4. 2017-2018-1 JAVA实验站 冲刺 day04

    2017-2018-1 JAVA实验站 冲刺 day04 各个成员今日完成的任务 小组成员 今日工作 完成进度 张韵琪 写博客.进行工作总结 100% 齐力锋 找背景音乐 100% 张浩林 游戏操作说 ...

  5. bzoj 3223 文艺平衡树 Splay 打标志

    是NOI2003Editor的一个子任务 #include <cstdio> #include <vector> #define maxn 100010 using names ...

  6. 把json格式的字符串转换成javascript对象或数组

      第一种 JSON.parse(jsonString) 第二种 eval("("+jsonString+")") 第三种 var obj=(function ...

  7. linux命令： Netstat

    在Internet RFC标准中,Netstat的定义是: Netstat是在内核中访问网络及相关信息的程序,它能提供TCP连接,TCP和UDP监听,进程内存管理的相关报告.    Netstat是控 ...

  8. jsonp和jsonpcallback的使用

    1. jsonp.jsonpCallback  jsonp跨域时可以自定义的两个参数 2. jsonp: 回掉函数名的参数名,默认callback,服务端通过它来获取到回掉函数名 3. jsonpCa ...

  9. 树莓派（Debian）系统开启iptables的raw表实现日志输出

    说明:可能Debian默认不开启iptables的raw表,所以无法通过其实现日志跟踪. 日志跟踪:http://www.cnblogs.com/EasonJim/p/8413563.html 解决方 ...

  10. 破解ZendStudio 10.1

    破解文件的网盘地址: http://pan.baidu.com/share/link?shareid=3562282358&uk=1543766223