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

本文链接：https://blog.csdn.net/Limyrain/article/details/51497589


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="点击选择图片" οnclick="$('#fileId').click();">
	<img src="addimg.jpg">
	</div>
    <button type="button" οnclick="uploadImage()">确定</button>
    </body>
</html>

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

 <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格式图片，原地址不详。)

;(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);

样式：

上传前：