js 上傳圖片並轉爲base64編碼+預覽圖片+壓縮 實例

js 上傳圖片並轉爲base64編碼+預覽圖片+壓縮
html部分

<div id="adds" class="fix">
	<form id="myForm" class="clearfix left" name="myForm">
		<div class="add_click res">
			<input type="file" name="pic" id="myFile" accept="image/*"/>
		</div>
	</form>
</div>
<div class="added_pics"></div>

js部分

var uId = localStorage.getItem("uId");
var objUrl;
var img_html;
var width = $(window).width();
$('#myFile').change(function(){
    var file = this.files[0];
	var iname = $(this).val();
	//後臺傳值需要
    var size = file.size / 1024;
    //獲取文件大小 用來判斷是否超過多少kb
    var URL = window.URL || window.webkitURL;
    var blob = URL.createObjectURL(file);
    var image = new Image();  
    image.src = blob;  
    image.onload = function(){  
      getUrlBase64(blob,size); 
    };
    //將圖片轉爲base64
    function getUrlBase64(url,size) {
        var canvas = document.createElement("canvas");   //創建canvas DOM元素
        var ctx = canvas.getContext("2d");
        var img = new Image;
        img.crossOrigin = 'Anonymous';
        img.src = url;
        img.onload = function () {
        	var w = this.width,h = this.height,scale = w / h;
            w = w > 600 ? 600 : w;
            h = w / scale;
            canvas.height = h; //指定畫板的高度,自定義
            canvas.width = w; //指定畫板的寬度，自定義
            ctx.drawImage(img, 0, 0, w, h); //參數可自定義
            if(size > 200){
            //判斷 如果圖片大圖200kb就壓縮 否則就不壓縮
            	var dataURL = canvas.toDataURL("image/jpeg",0.8);
            	//壓縮主要代碼 第二個參數表示壓縮比例，指爲1.0時表示不壓縮
            }else{
            	var dataURL = canvas.toDataURL("image/jpeg");
            }
            //顯示預覽
            var img_div = $(".added_pics");
    		var img_html = '<div class="isImg" data-pic=""><img src="' + dataURL + '" class="chooseImg" /></div>';
    		img_div.append(img_html);
    		var oFormData = new FormData();
    		// FormData()方法向後臺傳值
    		oFormData.append("uId",uId);
    		oFormData.append("newname",iname);
    		oFormData.append('base64', dataURL);
    		$.ajax({ //上傳到後臺 
    			url: '/H5/uploadImg.do',
    			type: 'post',
    			data: oFormData,
    			contentType: false,
    			processData: false,
    			success: function(data){
    				var data=JSON.parse(data);
    				//Do Something
    				alert("上傳成功！");
    			},
    			error: function(err){
    				bounce(err);
    			}
    		});
    		$('.add_click').closest('form').get(0).reset();
            canvas = null;
        };
    };