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. JSP实现界面的自动跳转的几种方式

    下面来谈一谈在jsp中实现的几种界面自动跳转的方法. 使用JavaScript脚本 <html> <script language=javascript> function o ...

  2. UNIX环境高级编程——进程间通讯方法整理

    一.无名管道pipe #include <unistd.h> int pipe(int fd [2]) 二.fifo #include <sys/stat.h> int mkf ...

  3. 我也来写spring

    本文可作为北京尚学堂 spring课程的学习笔记 我们还是用上一篇文章的例子 给数据库中增加一个user 整体代码如下 package com.bjsxt.test; import com.bjsxt ...

  4. 网站开发进阶(三十五)JSP页面中的pageEncoding和contentType两种属性

    JSP页面中的pageEncoding和contentType两种属性 本文介绍了在JSP页面中经常用的两种属性,分别是pageEncoding和contentType,希望对你有帮助,一起来看. 关 ...

  5. 分布式进阶(三)Ubuntu 14.04 之JDK安装

    Ubuntu 10.04 之JDK安装 1.从官网 (http://www.Oracle.com/technetwork/java/javase/downloads/jdk6u35-downloads ...

  6. Jquery之Bind方法参数传递与接收的三种方法

     方法一. function GetCode(event) { alert(event.data.foo); } $(document).ready(function() { $("#s ...

  7. Leetcode_125_Valid Palindrome

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

  8. Java Swing 之JTable及其简单的用法

    我们都知道JTable需要使用一个Model配合才能更好地发挥其作用.而使用Model有好多种方法,但是难易程度却大大不同,比如说我们使用AbstractTableModel接口要实现里面的好多方法, ...

  9. FT5X06 如何应用在10寸电容屏（linux-3.5电容屏驱动简析&移植10寸电容屏驱动到Android4.2） （by liukun321咕唧咕唧）

    这是几个月以前的东西了,在彻底遗忘之前拿出来好好写写.做个笔记,也算是造福后来人了.在做这个项目之前,没有做过电容屏的驱动,印象中的电容触摸屏是不需要校正的.IC支持多大的屏就要配多大的屏.但是拿到需 ...

  10. python3爬虫 - cookie登录实战

    http://blog.csdn.net/pipisorry/article/details/47948065 实战1:使用cookie登录哈工大ACM网站 获取网站登录地址 http://acm.h ...