圖片裁剪並上傳到阿里雲oss

此案例需要基於我前面兩遍文章的程式碼，建議先行閱讀。

阿里雲OSS圖片上傳（java web直傳）https://blog.csdn.net/u011628753/article/details/110876234

前端圖片裁剪並上傳到七牛雲kodo https://blog.csdn.net/u011628753/article/details/110877703

 

邏輯思想

將dataUrl（base64）轉換為file物件,利用uploader.addFile新增file檔案，然後再上傳檔案。（dataUrl是已經裁剪好的檔案）

 

需要呼叫的js

function getInfo(event){
		
		let reader = new FileReader();
		//這裡把一個檔案用base64編碼
		reader.readAsDataURL(event.target.files[0]);			
		reader.onload = function(e){
			let newImg = new Image();
			//獲取編碼後的值,也可以用this.result獲取
			newImg.src = e.target.result;
			newImg.onload = function () {
				/* 獲取  this.height tthis.width*/
				var dataURL = compress(newImg,this.width,this.height,0.8);
				/*為了相容ios 需要 dataURL-> blob -> file */
				var blob = dataURLtoBlob(dataURL);		// dataURL-> blob 
				var file = blobToFile(blob, '999');		// blob -> file
				console.log("得到檔案："+file);	
				console.log("壓縮後大小："+file.size/1024);				
				$("body").append("<img src='" + dataURL + "' />");
				
			}
		}
		
	}	
			
	function compress(img, width, height, ratio) { // img可以是dataURL或者圖片url
		/*	如果寬度大於 750 圖片太大 等比壓縮 	*/
		if(width > 750){
			var ratio = width/height;
			width = 750;
			height = 750/ratio;
		}		
		var canvas, ctx, img64;
		canvas = document.createElement('canvas');
		canvas.width = width;
		canvas.height = height;
		

		ctx = canvas.getContext("2d");
		ctx.drawImage(img, 0, 0, width, height);
		/* canvas.toDataURL(mimeType（圖片的型別）, qualityArgument（圖片質量）) */
		img64 = canvas.toDataURL("image/jpeg", ratio);

		return img64; // 壓縮後的base64串
	}
	//將base64轉換為blob
	function dataURLtoBlob (dataurl) { 
		var arr = dataurl.split(','),
			mime = arr[0].match(/:(.*?);/)[1],
			bstr = atob(arr[1]),
			n = bstr.length,
			u8arr = new Uint8Array(n);
		while (n--) {
			u8arr[n] = bstr.charCodeAt(n);
		}
		return new Blob([u8arr], { type: mime });
	}
	//將blob轉換為file
	function blobToFile(theBlob, fileName){
	   theBlob.lastModifiedDate = new Date();
	   theBlob.name = fileName;
	   return theBlob;
	}