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;
        };
    };