主要用了两个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. Web API 自定义文件内容的定制类

    public class FileContent : HttpContent { private readonly Stream _stream; public FileContent(string ...

  2. TCP/IP——IP网络协议简记

    IP提供不可靠.无连接的数据报传送服务 不可靠:不保证IP数据报能成功到达目的地,当发生错误时,IP的做法是丢弃这个数据报,然后发送ICMP消息报给信息源. 无连接:IP不维护任何关于后续数据报的状态 ...

  3. Python中yield和yield from的用法

    yield python中yield的用法很像return,都是提供一个返回值,但是yield和return的最大区别在于,return一旦返回,则代码段执行结束,但是yield在返回值以后,会交出C ...

  4. apk安装 卸载 原理

    韩梦飞沙  韩亚飞  313134555@qq.com  yue31313  han_meng_fei_sha 复制 apk到 /data/app目录下,解压并扫描 安装包, 把 dex文件,保存到 ...

  5. [BZOJ1492][NOI2007]货币兑换Cash(斜率优化+CDQ分治)

    1492: [NOI2007]货币兑换Cash Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 5838  Solved: 2345[Submit][Sta ...

  6. 【洛谷】1972:[SDOI2009]HH的项链【莫队+树状数组】

    P1972 [SDOI2009]HH的项链 题目背景 无 题目描述 HH 有一串由各种漂亮的贝壳组成的项链.HH 相信不同的贝壳会带来好运,所以每次散步完后,他都会随意取出一段贝壳,思考它们所表达的含 ...

  7. Google Code Jam Africa 2010 Qualification Round Problem A. Store Credit

    Google Code Jam Qualification Round Africa 2010 Problem A. Store Credit https://code.google.com/code ...

  8. Ubantu14.04下编译OpenCV3.0.0以及读取图片例子

    以前一直使用opencv 2.x的版本,现在3.0的已经发布成正式版了,尝试在Linux下安装. 收集了一篇不错的经验教程: Ubuntu14.04下安装OpenCV3.0经验. 编译的过程大概需要3 ...

  9. C# dataGridView根据数据调整列宽

    //自适应列宽 this.dgvBaoming.AutoSizeColumnsMode = System.Windows.Forms.DataGridViewAutoSizeColumnsMode.A ...

  10. 【转载】利用Matlab制作钟表

    静态时钟 hObject=figure; set(hObject,'NumberTitle','off'); set(hObject,'MenuBar','none'); set(hObject,'v ...