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. 常用js总结

    通过radio来显示/隐藏一个div <div id="ArbAcei" > <br/> 有无不良反应停药 <input type="rad ...

  2. LTP语法分析

    http://blog.csdn.net/pipisorry/article/details/50306931 POS词性标注解释 词性标注(Part-of-speech Tagging, POS)是 ...

  3. 【一天一道LeetCode】#77. Combinations

    一天一道LeetCode 本系列文章已全部上传至我的github,地址:ZeeCoder's Github 欢迎大家关注我的新浪微博,我的新浪微博 欢迎转载,转载请注明出处 (一)题目 Given t ...

  4. Leetcode_83_Remove Duplicates from Sorted List

    本文是在学习中的总结,欢迎转载但请注明出处:http://blog.csdn.net/pistolove/article/details/41728739 Given a sorted linked ...

  5. 学习pthreads，使用属性对象创建结合线程和分离线程

    当我们创建了子线程,是让它犹如脱缰之马,信步驰骋,还是如乖巧听话的孩子,时不时教导一下呢?针对这个问题,本文介绍线程的结合和分离,结构分为三个部分,第一部分给出代码示例,第二部分对代码进行讲解,第三部 ...

  6. Android 5.0 SEAndroid下如何获得对一个内核节点的访问权限

    -9]* u:object_r:tty_device:s0 # We add here /dev/wf_bt              u:object_r:wf_bt_device:s0 wf_bt ...

  7. 网络小白之WAN与LAN的区别

    剑指Offer--网络小白之WAN与LAN的区别 基本作用 wan接口是外网接口,是用来连接互联网或局域网等外部网络的. lan接口是内网接口,是用来连接计算机终端或其他路由器等终端设备的. 举例 w ...

  8. cocos2d-x 游戏开发之有限状态机(FSM) (三)

    cocos2d-x 游戏开发之有限状态机(FSM) (三) 有限状态机简称FSM,现在我们创建一个专门的FSM类,负责管理对象(Monkey)的状态.然后Monkey类就实现了行为与状态分离.Monk ...

  9. TCP的核心系列 — 重传队列的更新和时延的采样（一）

    重传队列实际上就是发送队列(sk->sk_write_queue),保存着发送且未确认的数据段. 当有新的数据段被确认时,需要把这些段从重传队列中删除,同时更新一些变量,包括 packets_o ...

  10. Swift之GCD使用指南1

    Grand Central Dispatch(GCD)是异步执行任务的技术之一.一般将应用程序中记述的线程管理用的代码在系统级中实现.开发者只需要定义想执行的任务并追加到适当的Dispatch Que ...