解決一些圖片上傳伺服器轉base64過大的問題
用到技術canvas

HTML程式碼

<input id="file" type="file">

js程式碼 

		<script type="text/javascript">
			var eleFile = document.querySelector('#file');
			// 壓縮圖片需要的一些元素和物件
			var reader = new FileReader(),
				//建立一個img物件
				img = new Image();

			// 選擇的檔案物件
			var file = null;

			// 縮放圖片需要的canvas
			var canvas = document.createElement('canvas');
			var context = canvas.getContext('2d');

			// base64地址圖片載入完畢後
			img.onload = function() {
				// 圖片原始尺寸
				var originWidth = this.width;
				var originHeight = this.height;
				// 最大尺寸限制，可通過國設定寬高來實現圖片壓縮程度
				var maxWidth = 800,
					maxHeight = 800;
				// 目標尺寸
				var targetWidth = originWidth,
					targetHeight = originHeight;
				// 圖片尺寸超過400x400的限制
				if(originWidth > maxWidth || originHeight > maxHeight) {
					if(originWidth / originHeight > maxWidth / maxHeight) {
						// 更寬，按照寬度限定尺寸
						targetWidth = maxWidth;
						targetHeight = Math.round(maxWidth * (originHeight / originWidth));
					} else {
						targetHeight = maxHeight;
						targetWidth = Math.round(maxHeight * (originWidth / originHeight));
					}
				}
				// canvas對圖片進行縮放
				canvas.width = targetWidth;
				canvas.height = targetHeight;
				// 清除畫布
				context.clearRect(0, 0, targetWidth, targetHeight);
				// 圖片壓縮
				context.drawImage(img, 0, 0, targetWidth, targetHeight);
				/*第一個引數是建立的img物件；第二個引數是左上角座標，後面兩個是畫布區域寬高*/
				//壓縮後的圖片base64 url
				/*canvas.toDataURL(mimeType, qualityArgument),mimeType 預設值是'image/jpeg';
				 * qualityArgument表示匯出的圖片質量，只要匯出為jpg和webp格式的時候此引數才有效果，預設值是0.92*/
				var newUrl = canvas.toDataURL('image/jpeg', 0.92); //base64 格式
				//console.log(canvas.toDataURL('image/jpeg', 0.92));
				console.log(newUrl)  //壓縮過後的base64碼
			};

			// 檔案base64化，以便獲知圖片原始尺寸
			reader.onload = function(e) {
				img.src = e.target.result;
			};
			eleFile.addEventListener('change', function(event) {
				file = event.target.files[0];
				// 選擇的檔案是圖片
				if(file.type.indexOf("image") == 0) {
					reader.readAsDataURL(file);
				}
			});
		</script>