H5 压缩图片上传(pc端适用)支持png/jpg格式（其他格式都会转为png）

来源：互联网发布：手机淘宝助理在哪里找编辑：程序博客网时间：2024/05/17 09:37

转载自：http://blog.csdn.net/limyrain/article/details/51497589

[html] view plain copy
html代码：  
<pre name="code" class="html"><!DOCTYPE html>  
<html lang="en">  
    <head>  
        <meta charset="utf-8">  
        <script src="js/jquery.js"></script>  
        <script src="js/jquery-ui.js"></script>  
        <script src="js/upload/jquery.fileupload.js"></script>  
        <script src="js/upload/preview.js"></script>  
    </head>  
    <body style="background:#000; color:#FFF">  
    <div>  
        <input hidden="hidden" id="fileId" type="file" name="imgFile" accept="image/*" />  
        <div id="progress" class="overlay"/></div>  
    </div>  
    <div id="picId" title="点击选择图片" onclick="$('#fileId').click();">  
    <img src="addimg.jpg">  
    </div>  
    <button type="button" onclick="uploadImage()">确定</button>  
    </body>  
</html>  

js:（设置宽高就压缩指定大小，不设置就原大小）

[javascript] view plain copy
<script type="text/javascript">  
    //图片压缩  
$('#fileId').fileupload({  
      dropZone:null,  
      pasteZone:null,  
      add: function (e, data) {  
        if($.support.localPreview){  
          var file = data.files[0];  
          $(this).previewImg({  
            uploadFile: file,   
            uploadData: data,  
            divName:'picId',  
            fileName:'picId',  
             width: 118,  
            height: 40,   
            quality: 90,  
          });  
        }else{  
          if (e.isDefaultPrevented()) {  
            return false;  
          }  
        }  
      },  
    }).prop('disabled', !$.support.fileInput).parent().addClass($.support.fileInput ? undefined : 'disabled');  
  
   function uploadImage() {  
    alert($("#bigPreviewImgpicId").attr("src"));  
    var img = $("#bigPreviewImgpicId").attr("src");  
    $.ajax({  
        type : "POST",  
        url : "footerConfig.action?action=saveImg",  
        data : {  
            base64Data : img  
        },  
        cache : false,  
        success : function(data) {  
            alert("上传成功");  
        },  
        error : function(XMLHttpRequest, textStatus, errorThrown) {  
            alert("上传失败，请检查网络后重试");  
        }  
    });  
}  
   </script>  

preview.js(此处是将别人发给我参考代码的稍加修改，做成了兼容png格式图片，原地址不详。)

[javascript] view plain copy
;(function ($) {  
  "use strict";  
  $.support.localPreview = !!(window.FileReader && window.Image && document.createElement('canvas').getContext);  
  var defaults = {  
     uploadFile: null,  
     uploadData: null,  
     width: null,  
     height: null,  
     resizable: false,  
     selectable: false,  
     avatarParams: {},  
     padding:0,  
     afterOpen: function(modal) {  
      //do your stuff  
     },  
     afterClose: function(modal) {  
      //do your suff  
     }  
  };  
  var config = {};  
  var jcrop = null;  
  var $this = new Object();  
  var methods = {  
    init : function(options) {  
          
        //alert(options.divName);  
        var DivName=options.divName;  
        var fileName=options.fileName;  
        return this.each(function() {  
            $this.uploader = $(this);  
            $this =  $.extend({}, $this, methods);  
            config = $.extend({}, defaults, options);  
  
            var reader = new FileReader();  
            var file = config.uploadFile;  
            if(file == null){  
              $.error( 'uploadFile is not setted!' );  
            }  
            reader.onload = function(e) {  
                $this.compress(e.target.result, options.quality, file.type,options.width,options.height, function(compressedSrc){  
                 var $img = $('<img>').attr("src", compressedSrc);  
                  $img.attr('id', 'bigPreviewImg'+fileName+'');  
                  $('#bigPreviewImg'+fileName).css({  
                      width:'300px',  
                  });  
                   
                  $('#'+DivName).empty().append($img);  
                });                  
            },  
            reader.readAsDataURL(file);  
        });  
    },  
  
    compress: function(src, quality, mime_type,width,height, callback){  
      var image = new Image();  
      image.src = src;   
  
      image.onload = function () { // binding onload event    
        var imgWidth = image.naturalWidth;  
        var imgHeight = image.naturalHeight;  
        var canvas = document.createElement('canvas');  
       /* if(imgHeight > 400) {  
          imgWidth *= 400 / imgHeight;  
          imgHeight = 400;  
        } */  
        var ctx = canvas.getContext("2d");  
        ctx.clearRect(0, 0, canvas.width, canvas.height);   
        canvas.width = (undefined==width)?imgWidth:width;  
        canvas.height = (undefined==height)?imgHeight:height;  
        ctx.drawImage(image, 0, 0, canvas.width, canvas.height);  
        mime_type = (undefined==mime_type) ? "image/jpeg" : mime_type;  
        quality = (undefined==quality)?"100" : quality;  
        var newImageData = canvas.toDataURL(mime_type, quality/100);  
  
        if(undefined !== callback){  
          callback(newImageData);  
        }  
      };  
    },  
   
  };  
  
  $.fn.previewImg = function(method) {  
    if ( methods[method] ) {    
      return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));    
    } else if ( typeof method === 'object' || ! method ) {  
      return methods.init.apply( this, arguments );    
    } else {    
      $.error( 'Method ' +  method + ' does not exist' );    
    }  
  };  
})(jQuery);  

样式：

上传前：

压缩后：（注：此时只是压缩后图片的现实，并没有上传到服务器。我是将得到的base64传到后台，在后台解析上传。后台操作此处没有记录）

代码下载地址：http://download.csdn.net/detail/limyrain/9530715

0 0