vue裁剪图片功能demo(可运行，直接复制即可)

vue裁剪图片功能demo(可运行，直接复制即可)

参考连接参考原文
原文已经说很清楚了,直接复制原文demo即可。

注意点：1.截取图像很糊：full: false, //输出原图比例截图  
	   2.上传文件格式 请注意你传到后台的文件格式 。
	   //下图为上传方法
	   {
			let _this = this;
			this.$refs.cropper.getCropData(base64Data => {
			console.log("截取拿到的值是base64格式，请注意你后台要什么格式",base64Data)
	// let param = {  //原文格式JSON传
				//   token: this.$store.state.token,
				//   image: base64Data
				// };
				// imageAdd(param).then(res => {
				//   // console.log("提交新增图片:", res);
				//   if (res.data.respCode == "00000") {
				//     this.$message.success(res.data.respDesc);
				//     this.photoCount++;
				//     this.cropImageFormVisible = false;
				//     this.getImageData();
				//   } else {
				//     this.$message.error(res.data.respDesc);
				//   }
				// });


				//我的后台要formData格式二进制格式文件格式  所以需要 base64转blob然后放入formData中发送 注意不要将此方法独立写在外层调用，会找不到的 原因不明
				console.log('裁剪图像', 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);
				}
				var bfile = new Blob([ia], {
					type: mimeString
				});
				var file = bfile;
				console.log(file);
				const formData = new FormData();
				formData.append('file', file);//转换
				//转换完毕
				$.ajax({
					url: '/api/****',
					data: formData,
					type: 'POST',
					cache: false,
					async: true,
					contentType: false,
					processData: false,
					success(data) {
						console.log(data);
				//上传成功的操作
					}
				});	
			});
		},