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进阶(二十六)MenuInflater实现菜单添加

    MenuInflater实现菜单添加 前言 之前实现的Android项目中可以实现菜单的显示.但是再次调试项目时发现此功能已无法实现,很是令人费解.难道是因为自己手机Android系统的问题?尝试通过 ...

  2. Java 学习之反射机制“解刨”分解类，并获取内容！

    正常情况下,单纯的做开发是接触不到反射机制的(额,当然并不排除例外的情况了).下面我就对我学到的反射方面的知识做一个小小的总结,旨在复习和以后的查看. 原理分析: 所谓反射就是将一个类当做我们研究的对 ...

  3. 《java入门第一季》之集合toString源码解析

    代码: Collection c = new ArrayList(); c.add("hello"); c.add("world"); c.add(" ...

  4. 海量数据挖掘MMDS week6: 支持向量机Support-Vector Machines,SVM

    http://blog.csdn.net/pipisorry/article/details/49445387 海量数据挖掘Mining Massive Datasets(MMDs) -Jure Le ...

  5. SpringMVC返回json是设置编辑等消息头，消息头信息介绍（respone.setHeader,这个从网上获取）

    1.  SpringMVC中设置消息头,例子如下: ? 因为上面的代码没有添加该文件的编码说明 , WEB应用程序在将jsp翻译成class文件时 , 把该字符串的内容按默认的保存方式指定的编码ASC ...

  6. 从Perforce到Git的迁移

    公司经过多次兼并.收购之后,开发团队使用的工具自然会出现鱼龙混杂的现象.就拿源代码管理工具来说,我们同时在使用的就有Perforce.Team Foundation.Subversion等.为了节省成 ...

  7. 一个简易版本的lua debugger实现

    introduction 工欲善其事,必先利其器.lua作为一门动态语言,虽然我已经习惯了使用print来进行代码调试,但是还是有很多童鞋觉得一款好用的调试器能更好的进行lua代码编写.所以在以前接手 ...

  8. MinerDB.java 数据库工具类

    MinerDB.java 数据库工具类 package com.iteye.injavawetrust.miner; import java.sql.Connection; import java.s ...

  9. Linux0.11进程切换和TSS结构

    TSS 全称为task state segment,是指在操作系统进程管理的过程中,进程切换时的任务现场信息.       X86体系从硬件上支持任务间的切换.为此目的,它增设了一个新段:任务状态段( ...

  10. SpriteBuilder中节点位置类型为百分比时不能定位的解决

    Ball.ccb类型是Node,其中有个子节点为Color Node,其中物理使能. MainScene.ccb中加入一个物理节点,将Ball.ccb拖入其中,成为该物理节点的孩子,这时出现了一个&q ...