js 實現圖片壓縮並轉換成base64(data:image/jpeg;base64)格式

時間 2020-07-26

標籤實現圖片壓縮並轉換成 base64 base data image jpeg 格式欄目 JavaScript 简体版

原文原文鏈接

<!DOCTYPE html>
<html>
  <head>
    <!--by 0o曉月メ http://www.cnblogs.com/final-elysion/p/6092675.html-->
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>compress pic to base64</title>
 
    <script type="text/javascript">
    	function uploadBtnClick(){
    		var scope = this;
    		// change pic to base64
			if(window.File && window.FileReader && window.FileList && window.Blob){	
				//For Ext :
				//var filefield = me.down('filefield'),
				//	  file = filefield.fileInputEl.dom.files[0];	
				var filefield = document.getElementById('fileToUpload'),
					file = filefield.files[0];
					
				var compressValue = document.getElementById('compressValue');
				processfile(file,compressValue,uploadCompressFile,scope);
			}else{
				alert("Upload picture is not fully supported in this browser");
			}

    	}


		function processfile(file,compressValue,uploadCompressFile,scope) {
			var reader = new FileReader();
			reader.onload = function (event) {
				var blob = new Blob([event.target.result]); 
				
				window.URL = window.URL || window.webkitURL;
				var blobURL = window.URL.createObjectURL(blob); 
				
				var image = new Image();
				image.src = blobURL;
				image.onload = function() {
					var resized = resizeMe(image); 
					compressValue.value = resized;
					uploadCompressFile.apply(scope);
				}
			};
			reader.readAsArrayBuffer(file);
		}

		function resizeMe(img) {
			//壓縮的大小
			var max_width =1024; 
			var max_height =768; 

			var canvas = document.createElement('canvas');
			var width = img.width;
			var height = img.height;

			if(width > height) {
				if(width > max_width) {
					height = Math.round(height *= max_width / width);
					width = max_width;
				}
			} 
			else{
				if(height > max_height) {
					width = Math.round(width *= max_height / height);
					height = max_height;
				}
			}
		  
			canvas.width = width;
			canvas.height = height;
		  
			var ctx = canvas.getContext("2d");
			ctx.drawImage(img, 0, 0, width, height);
		  	//壓縮率
			return canvas.toDataURL("image/jpeg",0.7); 
		}

		// call back 
    	function uploadCompressFile(){
    		//do ajax upload
    		document.getElementById('displayValue').innerHTML  = document.getElementById('compressValue').value;
    	}
    </script>

   
  </head>

  	<body >
 	 	<input type="file" name="fileToUpload" id="fileToUpload"/> <br />
 	 	<input type="text" name="compressValue" id="compressValue" style="display:none;" /><br/>
 	  	<input type="button" onclick="uploadBtnClick()" value="上存" /><br/>
 	  	<div id='displayValue' style="word-spacing: normal;word-wrap: break-word;"></div>

  	</body>
</html>