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

转载自：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);  

样式：

上传前：

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

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

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

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

秒客网

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

相关文章