js图片压缩

最近遇到一个功能需要前端上传图片到七牛云，并且压缩上传图片。
上传的动作主要是通过input[type=file]来完成，但是由于input[type=file]的样式并不美观，所以需要想办法隐藏input[type=file]，通过其他可以自定义样式的按钮去触发input[type=file]的上传事件。
我这里主要是通过“x-file”这个类名隐藏input[type=file]标签的。

压缩图片主要是通过canvas实现。核心代码截图如下：

实现图片压缩并上传至七牛云的完整代码：
html代码

<div id="box">
	<div class="form-group">
		<label class="col-sm-2 control-label"><strong class="red">*strong>上传头像label>
		<div class="col-sm-9">
			<button id="btnCardAdd" class="btn btn-primary" type="button" onclick="document.getElementById('cardFileupload').click();"><i class="fa fa-plus">i>  选择图片button>
			<input type="file" id="cardFileupload" class="x-file"  onchange="repairman.loadLocalImage(this,'cardImage',0);" accept="image/*" />
		div>
	div>
	<div class="form-group">
		<label class="col-sm-2 control-label">label>
		<div class="col-sm-9" id="uploadImgBox">
			<img class="cardImage" style="margin-top: 10px; width: 100px; height: 100px; max-width: 400px; border: 10px solid #EEEEEE;" src='../../images/award_default.jpg' />
		div>
	div>
div>

css代码

.x-file{
	position: absolute;
    top: 0;
    left: 0;
    width: 0px;
    height: 0px;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 100;
    background: #000000;
    border: none;
    cursor: pointer;
 }

js代码

//图片上传
loadLocalImage: function(fileObject, imageID, imageType) {
	if (typeof FileReader == 'undefined') {
		alert("当前浏览器不支持FileReader接口");
		return;
	}
	var file = fileObject.files[0];
	let reader = new FileReader();//新建一个FileReader对象
	reader.readAsDataURL(file);//将读取的文件转换成base64格式
	reader.onload = function (e) {

		// 压缩图片
		var image = new Image()     //新建一个img标签（不嵌入DOM节点，仅做canvas操作)
		image.src = e.target.result    //让该标签加载base64格式的原图
		image.onload = function () {    //图片加载完毕后再通过canvas压缩图片，否则图片还没加载完就压缩，结果图片是全黑的
			let canvas = document.createElement('canvas'), //创建一个canvas元素
				context = canvas.getContext('2d'),    //context相当于画笔，里面有各种可以进行绘图的API
				imageWidth = image.width / 2,    //压缩后图片的宽度，这里设置为缩小一半
				imageHeight = image.height / 2,    //压缩后图片的高度，这里设置为缩小一半
				data = ''    //存储压缩后的图片
			canvas.width = imageWidth    //设置绘图的宽度
			canvas.height = imageHeight    //设置绘图的高度

			//使用drawImage重新设置img标签中的图片大小，实现压缩。drawImage方法的参数可以自行查阅W3C
			context.drawImage(image, 0, 0, imageWidth, imageHeight)

			//使用toDataURL将canvas上的图片转换为base64格式
			data = canvas.toDataURL('image/jpeg');
			var blobURL = repairman.dataURItoBlob(data);

			// 图片上传至七牛云
			repairman.qiniuUpload(
				blobURL,
				// file.name,
				'bjx_' + new Date().getTime() + (parseInt(Math.random() * 100 + 1)),
				$('#uploadImgBox')
			);
		}
	}
},
// base64转blob
dataURItoBlob: function(base64Data) {
	var byteString;
	if(base64Data.split(',')[0].indexOf('base64') >= 0)
		byteString = atob(base64Data.split(',')[1]);
	else
		byteString = unescape(base64Data.split(',')[1]);
	var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];
	var ia = new Uint8Array(byteString.length);
	for(var i = 0; i < byteString.length; i++) {
		ia[i] = byteString.charCodeAt(i);
	}
	return new Blob([ia], {
		type: mimeString
	});
},
/**七牛云上传图片
 * cardImageUrl-----需要上传图片的bolb地址
 * token-----token
 * fileName-----上传图片的原文件名
 * nodeObj------显示图片的盒子
 * */
qiniuUpload: function(cardImageUrl, fileName, nodeObj) {
	$.ajax({
		url: win.utils.services.getQiniuToken,
		type: 'get',
		dataType: 'json',
		success: function (res) {
			var qiniuToken = res.token;
			var observable = qiniu.upload(
				cardImageUrl,
				fileName,
				qiniuToken,
				{
					fname: fileName,
					params: {}, //用来放置自定义变量
					mimeType: null
				}, {
					useCdnDomain: true,
					region: null
				}
			);
			observable.subscribe({
				complete(res) {
					var qiniuImgUrl = '七牛云地址'+res.key;
					$('#uploadImgBox img').attr('src', qiniuImgUrl);
					utils.showMessage('图片上传成功！');
					$('input[type="file"]').val(""); //上传成功后将input[type=file]的值置为空，这样在删除当前图片以后还可以重新上传同一张图片
				}
			});
		}
	});
},

效果：