Vue directive自定义指令+canvas实现H5图片压缩上传-Base64格式

1. 前言
   最近优化项目-手机拍照图片太大，回显速度比较慢，使用了vue的自定义指令实现H5压缩上传base64格式的图片

2. canvas自定义指令

Vue.directive("canvas", {
	bind: function (el, binding) {
		// 压缩图片需要的一些元素和对象
		var reader = new FileReader(), img = new Image();
		// 选择的文件对象
		var file = null;
		// 缩放图片需要的canvas
		var canvas = document.createElement('canvas');
		var context = canvas.getContext('2d');
		// base64地址图片加载完毕后
		img.onload = function () {
			// 图片原始尺寸
			var originWidth = this.width;
			var originHeight = this.height;
			//比例压缩
			var rate = 0.4;
			var targetWidth = originWidth * rate, targetHeight = originHeight * rate;
		
			// canvas对图片进行缩放
			canvas.width = targetWidth;
			canvas.height = targetHeight;
			// 清除画布
			context.clearRect(0, 0, targetWidth, targetHeight);
			// 图片压缩
			context.drawImage(img, 0, 0, targetWidth, targetHeight);
			// canvas转为blob并上传
			$.ajax({
				url: 'user/upload/base64',
				type: 'post',
				data: {
					file: canvas.toDataURL("image/jpeg", 0.7)
				},
				success: binding.value,
				error: function (e) {
					alert(e.status);
				}
			})
		};
		
		// 文件base64化，以便获知图片原始尺寸
		reader.onload = function(e) {
			img.src = e.target.result;
		};
		el.addEventListener('change', function (event) {
			file = event.target.files[0];
			// 选择的文件是图片
			if (file.type.indexOf("image") == 0) {
				reader.readAsDataURL(file);
			}
		});
	}
});

1. HTML

<div id="_upload">
	<i v-on:click="upload">自定义上传文件样式</i>
	<input id="_file" v-canvas="success" style="display: none;"/>
</div>

2. JS

var uploadVue = new Vue({
	el: '#_upload',
	methods: {
		upload: function () {
			$("#_file").click();
		},
		success: function (data) {
			//处理上传图片成功Ajax回调
		}
	}
});

结束

demo同时依赖Vue和Jquery, 同时要求后台可以处理base64的文件流，如果有问题欢迎评论，会及时回复。