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. Android进阶(二十二)设置TextView文字水平垂直居中

    设置TextView文字水平垂直居中 有2种方法可以设置TextView文字居中: 一:在xml文件设置:android:gravity="center" 二:在程序中设置:m_T ...

  2. Swing——鼠标（Action）

    本文是在学习中的总结,欢迎转载但请注明出处:http://blog.csdn.net/pistolove/article/details/41346969 看完这篇文章,你可能会学到到知识如下: (1 ...

  3. Touch Handling in Cocos2D 3.x(一)

    原帖地址 Cocos2d 3.0 带来经过完全修正后的触摸处理系统.本篇博文将提供所有触摸相关的信息: 接收触摸 取得触摸位置 处理不同个触摸生命周期中的事件 实现一个拖放机制 让我们开始吧 ;) 通 ...

  4. 阿里云服务器实战(一) : 在Linux下Tomcat7下使用连接池

    云服务器 的环境如下: Tomcat7+MySql5.6 一,如果自定义了程序的文件目录 , 下面的/alidata/xxx 就是自定义的目录 在Linux的Tomcat的server.xml里的Ho ...

  5. 【一天一道LeetCode】#46. Permutations

    一天一道LeetCode系列 (一)题目 Given a collection of distinct numbers, return all possible permutations. For e ...

  6. 干掉头疼的finished with non-zero exit value 2

    很多次会出现 finished with non-zero exit value 2  . Error:Execution failed for task ':app:dexDebug'. > ...

  7. VisualSVN Server安装过程

     运行VisualSVN-Server-2.7.3.msi程序, 如下图 点击Next, 下一步 选中 I accept选项, 点击Next, 下一步 选择默认配置, 服务和控制台组件方式, 点击 ...

  8. OpenCV轮廓检测，计算物体旋转角度

    效果还是有点问题的,希望大家共同探讨一下 // FindRotation-angle.cpp : 定义控制台应用程序的入口点. // // findContours.cpp : 定义控制台应用程序的入 ...

  9. centos6.2安装桌面环境 与中文支持

    yum groupinstall "X Window System" //安装Xorgyum groupinstall "Desktop" //安装GNOMEy ...

  10. 认识Zygote

    概述 在java中不同的虚拟机实例会为不同的应用分配不同内存,为了使Android系统尽快启动,使用了Zygote来预加载核心类库和一些加载时间长的类(超过1250ms),让Dalvik虚拟机共享代码 ...