基於canvas的圖片裁剪上傳及刪除

項目需求：欲實現PC端圖片從本地上傳，在裁剪框中裁剪成一定比例的圖片，該圖片會在微信端同步展示，考慮手機的屏幕適配，需要寬度爲640px（只需修改一下參數即可）,本文以寬320px爲例；

實現方式：點擊+框，圖片加載在canvas畫布，前端按照320/110比例裁剪圖片，裁剪後將base64編碼傳至後臺，後臺將base64編碼字符串轉換爲圖片，並返回圖片保存信息的實體類至前端展示；

引入文件：<script src="lib/zm-canvas-crop.js"></script>

前端代碼

html

<div class="form-group marginB15 no-padding">
    <label class="col-xs-1 defined-control-label2">XX海報</label>
    <div class="col-xs-10 marginT10">
        <div class="text-font12 marginB5">上傳本次XX標題海報</div>

        <div class="crop-picker-wrap">
            <div class="col-xs-5 no-left-padding direct-title-width">
                <div class="direct-block2 overflow" id="direct-block2" >
                    <p style="margin-top: 48px;"><i class="glyphicon glyphicon-plus text-font18"></i></p>
                    <input type="file" id="ipt" value="" name="" class="crop-picker-file">
                </div>

                <div class="direct-title-img marginT10" style="display: none;">
                    <!--<img ng-src="{{USPAD_USER_DATA_PATH+livePosterFile.path+livePosterFile.fileName}}"/>-->
                    <img id="base64">
                    <div id="deleteDirectImg">
                        <div class="direct-circle2"></div>
                        <div class="direct-delete2">X</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xs-7 crop-wrapper" id="crop-wrapper" style="display: none;">
            <div class="crop-area-wrapper">
                <div class="canvas-box"></div>
            </div>
            <div class="crop-container marginT10">
                <div class="col-xs-3 col-xs-push-2">
                    <button class="btn btn-primary btn-block" id="save" type="button">保存</button>
                </div>
                <div class="col-xs-3 col-xs-push-2">
                    <button class="btn btn-primary btn-block" id="cancel" type="button">取消</button>
                </div>
            </div>
        </div>
    </div>
</div>

js

1.controller中js爲如下：

new ZmCanvasCrop({
    path: $rootScope.USPAD_USER_DATA_PATH,
    fileInput: $('#ipt')[0],
    saveBtn: $('#save')[0],
    cancelBtn:$('#cancel')[0],
    deleteImg: $('#deleteDirectImg')[0],
    box_width: 300,  //剪裁容器的最大寬度
    box_height: 200, //剪裁容器的最大高度
    min_width: 320,  //要剪裁圖片的最小寬度
    min_height: 110  //要剪裁圖片的最小高度
},saveCallBack);

2.zm-canvas-crop.js

關於js的說明：①通過input type="file"上傳文件，通過監控其change事件執行readFile方法，在此處進行基礎判斷，圖片類型和大小等，然後將圖片加載在畫布中，進行裁剪；input[type='file']如果本次選擇的文件和上次的文件相同，則change事件不生效，通過清空input的value值（$('#ipt').val("");）解決。

②將從後臺獲取的圖片信息id傳至input的name，$('#ipt').attr("name",livePosterFile.id)，在controller中獲取該id，進行圖片刪除和保存提交或者整個頁面編輯完成後取消後的圖片刪除功能；

var path;
var livePosterFile;
function ZmCanvasCrop(opt, saveCallBack){
	path = opt.path;
	this.init(opt);
	this._option.crop_box_width = opt.box_width; //剪裁容器的最大寬度
	this._option.crop_box_height = opt.box_height;  //剪裁容器的最大高度
	this._option.crop_min_width = opt.min_width;  //要剪裁圖片的最小寬度
	this._option.crop_min_height = opt.min_height;  //要剪裁圖片的最小高度
	this._option.crop_scale = opt.min_width / opt.min_height;  //圖片會按照最小寬高的比例裁剪
}
function saveCallBack(base64, imgName) {
	//最終把此base64傳給後端
	$.ajax({
		type:'POST',
		async:false,
		url: ctx+'/file/cutUpload',
		data: {'base64': base64, 'mark': 'typhoon','imgName':imgName},
		dataType:'json',
		success: function (data) {
			if(data.status=="00"){
				var self = this;
				livePosterFile = data.data;
				//如果保存成功則圖片顯示
				$('#base64').attr("src",path+livePosterFile.path+livePosterFile.fileName);
				$('#ipt').attr("name",livePosterFile.id);
				$('.direct-title-img').css('display','');
				$('#crop-wrapper').css('display','none');
				$('.canvas-box').css('display','none');
			}else{
				alert("圖片上傳失敗");
			}
		}
	});

}

ZmCanvasCrop.prototype = {

	_$box : '',
	_$canvasDown: '',
	_$canvasUp: '',
	_input : '',
	_ctxUp: '',//裁剪區域canvas
	_img : '',
	_img_show: {
		width: '',
		height: '',
		scale: '', //顯示像素除以實際像素
		crop_width: '',//要裁剪部分顯示寬
		crop_height: '',
		min_width: '',//要裁剪部分顯示最小寬度
		min_height: ''
	},
	_option : {
		crop_box_width: '',			//圖片操作區域寬限制
		crop_box_height: '',			//圖片操作區域高限制
		crop_min_width: '',		//剪裁實際最小像素寬
		crop_min_height: '',	//剪裁實際最小像素高
		crop_scale: '' //寬高比
	},
	_save: {
		left: '',
		top: '',
		width: '',
		height: ''
	},
	_resize_point: {
		color: '#69f',
		size: 8
	},
	_resize_btn: {},

	init: function(opt){
		var self = this;
		self._input = opt.fileInput;

		self._$box = $('.canvas-box');            //裁剪框
		self._$titleImg = $('.direct-title-img'); //圖片顯示框
		self._$block = $('#direct-block2');       //+框
		self._wrapper = $('#crop-wrapper');       //整個裁剪框
		self.readFile();

		opt.saveBtn.addEventListener('click', function(){
			self.save();
		});
		opt.deleteImg.addEventListener('click', function(){
			self.deleteImg();
		});
		opt.cancelBtn.addEventListener('click', function () {
			self._wrapper.css("display","none");
			self._$block.css("display","");
			$("#ipt").val("");
			
		});
	},

	imgTrue: function(){
		if(this._img.width < this._option.crop_min_width || this._img.height < this._option.crop_min_height){
			return false;
		}
		return true;
	},

	readFile: function(){
		var self = this;

		if(typeof FileReader==='undefined'){
		    alert("抱歉，你的瀏覽器不支持 FileReader");
		    input.setAttribute('disabled','disabled');
		}else{
		    this._input.addEventListener('change', readFile, false);
		}

		function readFile(){
		    var file = this.files[0];

		    if(!/image\/\jpg|png|bmp|jpeg/.test(file.type)){
		        alert("文件必須爲圖片！");
                $('#ipt').val("");
		        return false;
		    }
		    if(file.size>1024*1024){
                alert("圖片大於1MB,請調整圖片至小於等於1MB！");
                $('#ipt').val("");
                return false;
            }

		    var reader = new FileReader();
		    reader.readAsDataURL(file);
		    reader.onload = function(e){
		        self.drawCavDown(this.result);
		    }
		}
	},

	drawCavDown: function(src){
		var self = this;
		//清除上一次的
		self._$box.html('');
		self._save = {};
		self._img_show = {};

		self._img = new Image();

	    self._img.onload = function(){

	    	if(!self.imgTrue()){
	    		alert('圖片大小必須大於:' + self._option.crop_min_width + '*' + self._option.crop_min_height);
                $('#ipt').val("");
	    		return;
	    	}
            self._$block.css('display','none');
            self._wrapper.css('display','');
            self._$box.css('display','');
	    	//讓寬或者高撐滿
	    	self.setShowImg();
	    	self._img_show.scale = self._img_show.width / self._img.width;//縮放比例

	    	//計算裁剪高亮區域的最小寬高
	    	self._img_show.min_width = self._option.crop_min_width * self._img_show.scale;
	    	self._img_show.min_height = self._option.crop_min_height * self._img_show.scale;

	    	//初始化顯示剪裁框寬高,按照寬或者高（更小）的一半顯示,如果一半值小於最小可剪裁值，還是按最小剪裁值顯示
			var size;
            if (self._img.width > self._img.height) {
            	size = self._img.height / 2;
            	if(size<self._option.crop_min_height){
		           self.resizeCrop({
						width: self._option.crop_min_width,
						height: self._option.crop_min_height
					});
            	}else{
            		 self.resizeCrop({
		        		height: size,
		                width: size * self._option.crop_scale
		            });
            	}
            } else {
            	size = self._img.width / 2;
            	if(size<self._option.crop_min_width){
		           self.resizeCrop({
						width: self._option.crop_min_width,
						height: self._option.crop_min_height
					});
            	}else{
            		 self.resizeCrop({
		        		height: size / self._option.crop_scale ,
		                width: size
		            });
            	}
            }


	      	//繪製底層剪裁區域
	      	drawDown();

	      	//載入上層canvas
	      	self.addUpCanvas();
	      	//綁定鬆開鼠標事件
	      	$(document).on('mouseup', function(){//在外部鬆開
				$(document).off('mousemove');
			});
	    }

	    self._img.src = src;

	    function drawDown(){
	    	var $canvas = $('<canvas width="' + self._img_show.width  + '" height="' + self._img_show.height + '"></canvas>');
			self._$box.append($canvas);
	      	var $ctx = $canvas[0].getContext('2d');
	      	$ctx.drawImage(self._img, 0, 0, self._img_show.width, self._img_show.height);
			//裁剪區域透明
			$ctx.beginPath();
			$ctx.fillStyle="rgba(0,0,0,0.6)";
			$ctx.fillRect(0, 0, self._img_show.width, self._img_show.height);

			self._$canvasDown = $canvas;
		}

	},
	setResizePoint: function(direction, left, top){
		return $('<div class="resize-point" style="width:' + this._resize_point.size +'px;height:' + this._resize_point.size + 'px;'+
			'background: ' + this._resize_point.color + ';cursor:'+ direction +';position:absolute;'+
			'left:'+ left +'px;top:'+ top +'px"></div>');
	},

	addUpCanvas: function(){

		var self = this;
		self.addResizeBtn();//添加放大縮小按鈕

		self._ctxUp = self._$canvasUp[0].getContext('2d');
		self._ctxUp.drawImage(self._img,  0, 0, self._img_show.crop_width / self._img_show.scale, self._img_show.crop_height / self._img_show.scale,0, 0, self._img_show.crop_width, self._img_show.crop_height);

		//初始化實際存儲
		self._save.left = 0;
		self._save.top = 0;
		self._save.width = self._img_show.crop_width / self._img_show.scale;
		self._save.height = self._img_show.crop_height / self._img_show.scale;

		self.upCanvasEvent();
	},
	//綁定鼠標按下事件
	upCanvasEvent: function(){
		var self = this;
		self._$canvasUp.on('mousedown', cavMouseDown);

		function cavMouseDown(e){
			var canv = this;

			//獲取到按下時，鼠標和元素的相對位置,相對偏差
			var relativeOffset = { x: e.clientX - $(canv).offset().left, y: e.clientY - $(canv).offset().top };
			$(document).on('mousemove', function(e){
				//阻止移動出圖片區域
				if(countPosition().left >= self._img_show.width - self._img_show.crop_width || countPosition().left <= 0) relativeOffset.x = e.clientX - $(canv).offset().left;

				if(countPosition().top >= self._img_show.height - self._img_show.crop_height || countPosition().top<=0) relativeOffset.y = e.clientY - $(canv).offset().top;

				$(canv).css({left: countPosition().left, top: countPosition().top });//移動上層canvas

				//實際存儲
				self._save.left = countPosition().left / self._img_show.scale;
				self._save.top = countPosition().top / self._img_show.scale;
				self._save.width = self._img_show.crop_width / self._img_show.scale;
				self._save.height = self._img_show.crop_height / self._img_show.scale;

				//重繪剪裁區域
				self._ctxUp.drawImage(self._img,
					self._save.left, self._save.top, self._save.width, self._save.height,
					0, 0, self._img_show.crop_width, self._img_show.crop_height
				);

				//設置縮放按鈕位置
				self.resizePosition();
				function countPosition(){
					var left = (e.clientX - relativeOffset.x) - self._$canvasDown.offset().left;//還要減去父元素到左邊窗口的距離
					var top = (e.clientY - relativeOffset.y) - self._$canvasDown.offset().top;//還要減去父元素到左邊窗口的距離
					return {left: left, top: top}
				}
			});
		}
	},
	addResizeBtn: function(){
		var self = this;
		//載入方向按鈕
		var $seResize =	self.setResizePoint('se-resize', self._img_show.crop_width - self._resize_point.size/2, self._img_show.crop_height - self._resize_point.size/2);
		var $swResize = self.setResizePoint('sw-resize', -self._resize_point.size/2, self._img_show.crop_height - self._resize_point.size/2);
		var $neResize = self.setResizePoint('ne-resize', self._img_show.crop_width - self._resize_point.size/2, -self._resize_point.size/2);
		var $nwResize = self.setResizePoint('nw-resize', -self._resize_point.size/2, -self._resize_point.size/2);

		var $canvas = $('<canvas class="overlay" width="' + self._img_show.crop_width  + '" height="' + self._img_show.crop_height + '"></canvas>');

		self._$box.append($canvas);
		self._$canvasUp = $canvas;

		self._$box.append($seResize);
		self._$box.append($swResize);
		self._$box.append($neResize);
		self._$box.append($nwResize);

		self._resize_btn.$se = $seResize;
		self._resize_btn.$sw = $swResize;
		self._resize_btn.$ne = $neResize;
		self._resize_btn.$nw = $nwResize;

		self.resizeEvent();
	},
				//綁定方向按鈕事件
	resizeEvent: function(){
		var self = this;
		$('.resize-point').on('mousedown', function(){

			var pLeft = $(this).position().left + self._resize_point.size/2,
				pTop = $(this).position().top + self._resize_point.size/2;
			var upLeft = self._$canvasUp.position().left,
				upTop = self._$canvasUp.position().top;
			var noChangeX,noChangeY;
			if(upLeft >= pLeft) noChangeX = -(upLeft + self._img_show.crop_width);//爲負在右
			else noChangeX = upLeft;
			if(upTop >= pTop) noChangeY = -(upTop + self._img_show.crop_height);//爲負在下
			else noChangeY = upTop;

			$(document).on('mousemove', function(e){
				if(noChangeX >= 0 ){
					self._$canvasUp.css("left", noChangeX)
				}else{
					self._$canvasUp.css("left",  Math.abs(noChangeX) - self._img_show.crop_width);
				}
				if(noChangeY >= 0 ){
					self._$canvasUp.css("top", noChangeY)
				}else{
					self._$canvasUp.css("top",  Math.abs(noChangeY) - self._img_show.crop_height);
				}
				//阻止移動出圖片區域
				self._img_show.crop_width = Math.abs(Math.abs(noChangeX) - countPosition().left);
				self._img_show.crop_height = self._img_show.crop_width / self._option.crop_scale;
				if(noChangeX >= 0 && noChangeX + self._img_show.crop_width > self._img_show.width){
					self._img_show.crop_width = self._img_show.width - noChangeX;
					self._img_show.crop_height = self._img_show.crop_width / self._option.crop_scale;
				}else if(noChangeX < 0 && Math.abs(noChangeX) - self._img_show.crop_width < 0 ){
					self._img_show.crop_width = Math.abs(noChangeX);
					self._img_show.crop_height = self._img_show.crop_width / self._option.crop_scale;
				}
				if(noChangeY >= 0 && noChangeY + self._img_show.crop_height > self._img_show.height) {
					self._img_show.crop_height = self._img_show.height - noChangeY;
					self._img_show.crop_width = self._img_show.crop_height * self._option.crop_scale;
				}else if(noChangeY < 0 && Math.abs(noChangeY) - self._img_show.crop_height < 0){
					self._img_show.crop_height = Math.abs(noChangeY);
					self._img_show.crop_width = self._img_show.crop_height * self._option.crop_scale;
				}
				//如果寬高小於限制
				if(self._img_show.crop_width < self._img_show.min_width){
					self._img_show.crop_width = self._img_show.min_width;
					self._img_show.crop_height = self._img_show.crop_width / self._option.crop_scale;
				}
				if(self._img_show.crop_height < self._img_show.min_height){
					self._img_show.crop_height = self._img_show.min_height;
					self._img_show.crop_width = self._img_show.crop_height / self._option.crop_scale;
				}

				//實際存儲
				if(noChangeX>=0){
					self._save.left = noChangeX / self._img_show.scale;
				}else{
					self._save.left = (Math.abs(noChangeX) - self._img_show.crop_width) / self._img_show.scale;
				}
				if(noChangeY>=0){
					self._save.top = noChangeY / self._img_show.scale;
				}else{
					self._save.top = (Math.abs(noChangeY) - self._img_show.crop_height) / self._img_show.scale;
				}
				self._save.width = self._img_show.crop_width / self._img_show.scale;
				self._save.height = self._img_show.crop_height / self._img_show.scale;

				//重繪剪裁區域,修改屬性寬高，否則無效
				self._$canvasUp.attr("width", self._img_show.crop_width);
				self._$canvasUp.attr("height", self._img_show.crop_height);
				self._ctxUp.drawImage(self._img,
					self._save.left, self._save.top, self._save.width, self._save.height,
					0, 0, self._img_show.crop_width, self._img_show.crop_height
				);
				self.resizePosition();

				function countPosition(){//鼠標在底層canvas的相對位置
					var left = e.clientX - self._$canvasDown.offset().left ;
					var top = e.clientY - self._$canvasDown.offset().top ;
					return {left: left, top: top}
				}

			});

		});

	},
	resizePosition: function(){
		var self = this;
		self._resize_btn.$se.css({left: self._$canvasUp.position().left + self._img_show.crop_width- self._resize_point.size/2, top: self._$canvasUp.position().top + self._img_show.crop_height - self._resize_point.size/2});//加上寬高,減去本身大小
		self._resize_btn.$sw.css({left: self._$canvasUp.position().left - self._resize_point.size/2, top: self._$canvasUp.position().top + self._img_show.crop_height - self._resize_point.size/2});//加上寬高,減去本身大小
		self._resize_btn.$ne.css({left: self._$canvasUp.position().left + self._img_show.crop_width - self._resize_point.size/2, top: self._$canvasUp.position().top - self._resize_point.size/2});//加上寬高,減去本身大小
		self._resize_btn.$nw.css({left: self._$canvasUp.position().left - self._resize_point.size/2, top: self._$canvasUp.position().top - self._resize_point.size/2});//加上寬高,減去本身大小
	},
	parseInt: function(){
		this._save.width = parseInt(this._save.width);
		this._save.height = parseInt(this._save.height);
		this._save.top = parseInt(this._save.top);
		this._save.left = parseInt(this._save.left);
	},
	//保存
	save: function(){
		this.parseInt();//取整，避免出現雜邊線條
		var self = this;
		var $result = $("<canvas width='"+ self._save.width +"' height='"+ self._save.height +"'></canvas>");
		// $('body').append($result);
		$result[0].getContext('2d').drawImage(self._img,
			self._save.left, self._save.top, self._save.width, self._save.height,
			0, 0, self._save.width, self._save.height
		);

		var base64Url = $result[0].toDataURL('image/jpeg');

		saveCallBack && saveCallBack(base64Url,self._input.files[0].name);


		return base64Url;
	},
	//刪除圖片
	deleteImg: function(){
		if(checkNotNull(livePosterFile)){
			$.ajax({
				type:'GET',
				async:false,
				url: ctx+'/file/deleteFile',
				data: {'id': livePosterFile.id},
				dataType:'json',
				success: function (data) {
					if(data.status=="00"){
						livePosterFile = "";
						$('#base64').attr("src","");
						$('.direct-title-img').css('display','none');
						$('#direct-block2').css('display','');
						$('#ipt').attr("name","");
						$('#ipt').val('');
					}else{
						alert("圖片刪除失敗");
					}
				}
			});
		}
	},

	//顯示的圖片大小,三種結果，撐滿寬或者高，或者原圖大小
	setShowImg: function(){
		// console.log(this+";"+this._img.width+";"+this._option.crop_box_width+";"+this._img.height";"+";");
		if( this._img.width <= this._option.crop_box_width && this._img.height <= this._option.crop_box_height ) {
			this._img_show.width = this._img.width;
			this._img_show.height = this._img.height;
			return;
		}

		var weight = 0;//設置權重
		if( this._img.width > this._option.crop_box_width ) weight+=10;
		if( this._img.height > this._option.crop_box_height ) weight-=10;
		if( this._img.width / this._img.height > this._option.crop_box_width / this._option.crop_box_height) weight+=5;
		else weight-=5;
		if( this._img.width >= this._img.height ) weight++;
		else weight--;

		if(weight > 0){//撐滿寬度
			this._img_show.width = this._option.crop_box_width;
			this._img_show.height =  this._option.crop_box_width / ( this._img.width / this._img.height );
		}else{//撐滿高度
			this._img_show.height = this._option.crop_box_height;
			this._img_show.width =  this._option.crop_box_height / ( this._img.height / this._img.width );
		}
	},

	resizeCrop: function(real){//剪裁框大小
		this._img_show.crop_width = real.width * this._img_show.scale;
		this._img_show.crop_height = real.height * this._img_show.scale;
	}

}

css

.direct-title-width{
    width: 349px;
}
.direct-delete2{
    left: 321px;
}
.direct-circle2{
    left: 316px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #fff;
    border: 1px solid #276399;
}
.direct-title-img{
    position: relative;
    padding: 2px 0;
    height: 124px;
    text-align: center;
    border: 5px solid #D0CDC7;
    color: #276399;
}
.direct-title-img img{
    width: 320px;
    height: 110px;
}
.direct-title-img div{
    position: absolute;
    top: -6px;
}
.direct-block2{
    height: 122px;
    text-align: center;
    cursor: pointer;
    border: 2px dashed #999;
}
.crop-picker-wrap {
    position: relative;
    /*width: 100px;*/
    /*height: 30px;*/
    overflow: hidden;
}
.crop-picker-file {
    position: absolute;
    top: 0;
    left: 0px;
    width: 330px;
    height: 120px;
    opacity: 0;
    cursor: pointer;
    filter: alpha(opacity=0);
}
.crop-wrapper {
    display: inline-block;
    margin: 10px 0;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 0 5px 2px #ccc;
}
.crop-container {
    font-size: 0;
}
.crop-area-wrapper {
    width: 400px;
    height: 200px;
}
.canvas-box{
    width: 300px;
    height: 200px;
    position: relative;
    -webkit-user-select:none;
    -moz-user-select:none;
    -o-user-select:none;
    user-select:none
}
.canvas-box .overlay{
    position: absolute;
    left: 0;
    top: 0;
    cursor: move;
    border:1px solid #69f;
}
.canvas-box div,.canvas-box canvas{
    -webkit-user-select:none;
    -moz-user-select:none;
    -o-user-select:none;
    user-select:none
}

後臺代碼

controller

@RestController
@RequestMapping("file")
public class UspadFileController {
	
	@Autowired
	private UspadFileService uspadFileService;
    
    /**刪除文件信息*/
    @GetMapping("deleteFile")
    public Map<String,Object> deleteFile(@RequestParam(name="id",required=true)String[] ids){
        if(ids!=null && ids.length>0){
            for(String id : ids){
                uspadFileService.deleteFile(id);
            }
        }
        return ResultMapHelper.success();
    }

    /**裁剪圖片保存*/
    @PostMapping("cutUpload")
    public Map<String, Object> cutUpload(@RequestParam(name="base64",required=true) String base64,
                                         @RequestParam(name="mark",required=true) String mark,
                                         @RequestParam(name="imgName",required=true) String imgName) throws Exception {
        if (base64 == null || StringUtils.isBlank(base64) || StringUtils.isBlank(mark) || StringUtils.isBlank(imgName)) {
            return ResultMapHelper.nullParamsResult();
        }
        UspadFile ufile = uspadFileService.cutUploadFile(base64, mark, imgName);
        return ResultMapHelper.success(ufile);
    }

}

service

/**刪除圖片信息*/
    @Transactional
    public Map<String, Object> deleteFile(String id) {
        UspadFile file = uspadFileDao.findOne(id);
        if(file!=null){
            uspadFileDao.delete(file);
            return ResultMapHelper.success();
        }else{
            return ResultMapHelper.failure("未找到此文件");
        }
    }

    /**裁剪圖片保存*/
    @Transactional
    public UspadFile cutUploadFile(String base64, String mark, String imgName) throws IOException {
        base64 = base64.substring(23);
        String originalName = imgName;
        String extension = imgName.substring(imgName.indexOf(".")+1, imgName.length());
        String path = "/" + mark+"/"+
                DateTimeUtils.converDateToString(new Date(), DateTimeUtils.DATE_PATTERN_DAY_01)+"/";
        File folder = new File(AppConfig.getProperty("user_data_path")+path);
        if(!folder.exists()){
            folder.mkdirs();
        }
        String savePath = AppConfig.getProperty("user_data_path")+path+originalName;//圖片終極路徑
        Img2Base64Util.generateImage(base64,savePath);//將base64編碼字符串轉換爲圖片
        UspadFile uFile = new UspadFile();
        uFile.setCreateTime(DateTimeUtils.getCurrentTime());
        uFile.setFileName(originalName);
        uFile.setFileType(extension);
        uFile.setHost1(AppConfig.getProperty("server_ip"));
        uFile.setMark(mark);
        uFile.setOriginName(originalName);
        uFile.setPath(path);
        uspadFileDao.save(uFile);
        //保存以後，拿到ID，如果是颱風圖片則傳送圖片
        if(Constants.MARK_TYPHOON.equals(mark)){
            String result = wxUrlService.sendFile(savePath, uFile.getId());
            if(StringUtils.isNotBlank(result)){
                //保存推送狀態
                uFile.setSendResult(result);
                uspadFileDao.save(uFile);//再保存一次
            }
        }
        return uFile;
    }

實現效果

注：此爲個人筆記及總結，有誤或有更好的解決方案請指正！謝謝