http://blog.csdn.NET/qazwsx2345/article/details/21827553

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

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

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8"/>

    <title>File API Test</title>

    <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>

    <script type="text/javascript" src="js/JIC.js"></script>

    <style>

        #test{

            display: none;

        }

    </style>

</head>

<body>

<input type="file" id="fileImg" >

<form>

    <img src="" id="test" alt="">

</form>

<script>

    function handleFileSelect (evt) {

        // var filebtn = document.getElementById(id);

        // console.log(filebtn);

        // var files = filebtn.target.files;

        // console.log(filebtn.target);

        // console.log(files);

        var files = evt.target.files;

        for (var i = 0, f; f = files[i]; i++) {  

          // Only process image files.

          if (!f.type.match('image.*')) {

            continue;

          }  

          var reader = new FileReader();  

          // Closure to capture the file information.

          reader.onload = (function(theFile) {

            return function(e) {

              // Render thumbnail.

              // console.log(evt.target.files[0]);

              // console.log(e.target);

              console.log(e.target.result);

              var i = document.getElementById("test");

              i.src = event.target.result;

              console.log($(i).width());

              console.log($(i).height());

              $(i).css('width',$(i).width()/10+'px');

              //$(i).css('height',$(i).height()/10+'px');

              console.log($(i).width());

              console.log($(i).height());

              var quality =  50;

              i.src = jic.compress(i,quality).src;

              console.log(i.src);

              i.style.display = "block";

            };

          })(f);  

          // Read in the image file as a data URL.

          reader.readAsDataURL(f);

        }

      }  

    document.getElementById('fileImg').addEventListener('change', handleFileSelect, false);

</script>

</body>

</html>  

var jic = {

        /**

         * Receives an Image Object (can be JPG OR PNG) and returns a new Image Object compressed

         * @param {Image} source_img_obj The source Image Object

         * @param {Integer} quality The output quality of Image Object

         * @return {Image} result_image_obj The compressed Image Object

         */  

        compress: function(source_img_obj, quality, output_format){  

             var mime_type = "image/jpeg";

             if(output_format!=undefined && output_format=="png"){

                mime_type = "image/png";

             }  

             var cvs = document.createElement('canvas');

             //naturalWidth真实图片的宽度

             cvs.width = source_img_obj.naturalWidth;

             cvs.height = source_img_obj.naturalHeight;

             var ctx = cvs.getContext("2d").drawImage(source_img_obj, 0, 0);

             var newImageData = cvs.toDataURL(mime_type, quality/100);

             var result_image_obj = new Image();

             result_image_obj.src = newImageData;

             return result_image_obj;

        },

       function   ****(***){}

}

利用HTML5，前端js实现图片压缩的更多相关文章

  1. 使用HTML5的两个api，前端js完成图片压缩

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

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

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

  3. Html5+asp.net mvc 图片压缩上传

    在做图片上传时,大图片如果没有压缩直接上传时间会非常长,因为有的图片太大,传到服务器上再压缩太慢了,而且损耗流量. 思路是将图片抽样显示在canvas上,然后用通过canvas.toDataURL方法 ...

  4. js/vue图片压缩

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

  5. 利用Python进行博客图片压缩

    自己写博客的时候常常要插入一些手机拍的照片,都是几M的大小,每张手动压缩太费事了,于是根据自己博客的排版特点用Python写了一个简单的图片压缩脚本,功能是将博客图片生成缩略图,横屏的图片压缩为宽度最 ...

  6. web图片前端裁剪功能实现_利用html5 canvas技术实现图片裁剪

    用户上传头像然后截图的需求很常见,很多做法是把图像发送到后端,把裁剪后的结果发送给浏览器,这种方式会增加处理时延.最近正好学习了HTML5里的canvas,发现它的图片处理功能比较强大,就打算用can ...

  7. 利用JPEGImageEncoder进行简单的图片压缩

    import java.awt.Dimension; import java.awt.Image; import java.awt.image.BufferedImage; import java.i ...

  8. 利用HTML5和css3 选中图片上传到服务器，插件地址如下

    https://yusi123.com/3349.html 分三步,需要将js文件和css文件拷贝到项目目录下,在需要选择的图片的文件中引入,然后将HTML代码复制 <!--选择图片模块star ...

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

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

随机推荐

  1. 尚学堂马士兵struts2 课堂笔记(三)

    19-20 简单数据验证 例如 前台jsp 及struts.xml <a href="user/user!add?name=a" >添加用户</a> < ...

  2. 【翻译】Ext JS 6 Beta发布

    原文:Ext JS 6 Beta is Now Available 概述 Ext JS 6的好处 新的Ext JS功能和工具 需要你的反馈意见 概述 很高兴,Ext JS 6 beta版本现在发布了. ...

  3. 分布式进阶(十) linux命令行下载文件以及常用工具：wget、Prozilla、MyGet、Linuxdown、Curl、Axel

    linux命令行下载文件以及常用工具:wget.Prozilla.MyGet.Linuxdown.Curl.Axel 本文介绍常用的几种命令行式的下载工具:wget.Prozilla.MyGet.Li ...

  4. Linux 学习笔记_12_Windows与Linux文件共享服务_1.1_--Samba（上）

    Samba简介:在UNIX系统中,Samba是通过服务器消息块协议(SMB)在网络上的计算机之间,共享文件和打印服务的软件包. SMB简介:Server Message Block,SMB协议是一种服 ...

  5. LCS问题（最长公共子序列）-动态规划实现

    问题描述: 问题] 求两字符序列的最长公共字符子序列 注意: 并不要求子串(字符串一)的字符必须连续出现在字符串二中. 思路分析: 最优子结构和重叠子问题的性质都具有,所以要采取动态规划的算法 最长公 ...

  6. javascript的介绍，实现和输出以及语法-javascript学习之旅（1）

    javascript的介绍 : 1.javascript死互联网最流行的脚本语言,可用于web和html,并且可用于服务器,pc和移动端 2.javascript脚本语言: 1.是一种轻量级的脚本语言 ...

  7. python 去掉 pyc

    python 去掉 .pyc 在开发的机器上(Ubuntu),python自动生成的pyc文件太影响心情,把下面的语句添加到 /etc/profile中: # do not produce .pyc ...

  8. 在Android中afinal框架下实现sqlite数据库版本升级的办法

    上一篇文章采用的是SQLiteOpenHelper中的onUpgrade方法实现数据库的升级. 首先获取Context: private Context mContext=this; 然后实现Fina ...

  9. sqlite相关使用

    一.SQLite简介   SQLite是一款轻型的数据库,是遵守ACID的关联式数据库管理系统,它的设计目标是嵌入式的,而且目前已经在很多嵌入式产品中使用了它,它占用资源非常的低,在嵌入式设备中,可能 ...

  10. 报表软件公司高价悬赏BUG，100块1个我真是醉了

    一直在用帆软的报表软件FineReport来做项目,也一直关注着这个公司的发展. 看到<提BUG,拿奖金>的这个活动,有些疑问和思考. 一般FineReport新版本在正式发布前,都会经过 ...