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"
4000
);   //创建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;
};
};