zoukankan      html  css  js  c++  java
  • JS图片压缩

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8"/>
        <title>File API Test</title>
        <script type="text/javascript" src="jquery-1.11.0.min.js"></script>
        <script type="text/javascript" src="de.js"></script>
        <style>
            #test{
                100px;
                height:100px;
            }
        </style>
    </head>
    <body>
    <input type="file" id="fileImg" >
    <form>
        <img src="" id="test" alt="">
    </form>
    <script>
        function handleFileSelect (evt) {
            console.log( document.getElementById("fileImg").files);
            // 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>

    de.js

    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 (){}
    }

     这是在网上摘抄的完整代码,可以直接运行成功。

  • 相关阅读:
    68、成员列表初始化?
    67、类成员初始化方式?构造函数的执行顺序 ?为什么用成员初始化列表会快一 些?
    64、malloc申请的存储空间能用delete释放吗?
    63、new和delete的实现原理, delete是如何知道释放内存的大小的额?
    62、delete p、delete [] p、allocator都有什么作用?
    60、C++模板是什么,你知道底层怎么实现的?
    nyoj--814--又见拦截导弹(动态规划+贪心)
    hdoj--1950--Bridging signals(二分查找+LIS)
    nyoj--214--单调递增子序列(二)(二分查找+LIS)
    hdoj--1010--Tempter of the Bone(搜索+奇偶剪枝)
  • 原文地址:https://www.cnblogs.com/BlingSun/p/7852520.html
Copyright © 2011-2022 走看看