主要用了两个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. Git gitconfig 配置

    difftool: [diff] tool = bc4 algorithm = histogram [difftool] prompt = false [difftool "bc4" ...

  2. PBR Step by Step（三）BRDFs

    BRDF BRDF(Bidirectional Reflectance Distribution Function)双向反射分布函数,用来描述给定入射方向上的入射辐射度以及反射方向上的出辐射度分布,B ...

  3. padding Oracle attack（填充Oracle攻击）

    最近学习到一种老式的漏洞,一种基于填充字节的漏洞.就想记录下来,早在2010年的blackhat大会上,就介绍了padding Oracle漏洞,并公布了ASP.NET存在该漏洞.2011年又被评选为 ...

  4. Java 请求webServce接口 不带参数

    最近对接了个webService的接口取数据,从网上良莠不齐的代码中找到了个方法, 具体作者已经记不住是谁了,现在把代码贴出来,希望可以帮到大家,代码如下,简单粗暴 public String get ...

  5. [转]Java 对象锁-synchronized()与线程的状态与生命周期

      线程的状态与生命周期 Java 对象锁-synchronized() ? 1 2 3 4 synchronized(someObject){   //对象锁 } 对象锁的使用说明: 1.对象锁的返 ...

  6. PAT甲级1098. Insertion or Heap Sort

    PAT甲级1098. Insertion or Heap Sort 题意: 根据维基百科: 插入排序迭代,消耗一个输入元素每次重复,并增加排序的输出列表.在每次迭代中,插入排序从输入数据中删除一个元素 ...

  7. keras入门--Mnist手写体识别

    介绍如何使用keras搭建一个多层感知机实现手写体识别及搭建一个神经网络最小的必备知识 import keras # 导入keras dir(keras) # 查看keras常用的模块 ['Input ...

  8. Android ButterKnife注解框架使用

    这段时间学习了下ButterKnife注解框架,学习的不是特别深入,但是基础也差不多了,在此记录总结一下. ButterKnife是一个Android View注入的库,主要是注解的使用,可以减少很多 ...

  9. Java容器-引用数据类型排序+TreeSet、TreeMap底层实现

    目录 1.冒泡排序的实现 2.比较接口(普通数据类型.引用数据类型) 普通数据类型:冒泡排序 引用数据类型:包装类(Integer.String.Character.Date) 自定义类型:实体类:i ...

  10. 解决WPF中重载Window.OnRender函数失效问题

    今天实验一个绘图算法的时候,偶然发现重载Window.OnRender的方法是没有效果的. public partial class MainWindow : Window { public Main ...