angular 图片裁剪cropperjs 应用及在iOS 图片旋转90度的问题并压缩图片

angular图片裁剪cropperjs应用 base64转图片使用exif-js旋转图片 压缩图片

为什么需要压缩图片呢？

当你进行cropper裁剪图片的时候需要用canvas重新绘制你的图片进行裁剪，由于图片较大绘制很慢，用户操作性不好，ios也会出现卡顿状况

为什么用exif-js旋转

html5+canvas进行移动端手机照片上传时，发现ios手机上传竖拍照片会逆时针旋转90度，横拍照片无此问题；
犹豫苹果手机拍照后的图片比较大，当图片大于2M时，图片会自动旋转90度，当你切图的时候会生成一个旋转后的图片。为了规避此问题我们需要对照片从新进行canvas。
安卓手机 3星也存在此问题

上代码

官网说的很明确 ，npm install 或者 bower install 引入文件。然后就是应用。我第一开始使用import引入，没有找到什么问题（不知道是我的问题还是框架的问题），总是说cropper的支持文件找不到。很烦。于是很粗暴的选择了直接在index.html引入js和css

// 引入cropperjs
   <link href="lazyload/lib/cropperjs/dist/cropper.min.css" rel="stylesheet">
   <script src="lazyload/lib/cropperjs/dist/cropper.min.js"></script>

因为你直接在index.html 中直接引入的cropperjs所以并不需要在controller中引入可直接引用。
注：img标签必须在一个div或者其他块级元素中否则并不能生成裁剪效果。

// 当然之前你必须执行上传图片操作resp.data['DATA'][0]这个为我上传图片的id vm.photo为图片的访问地址（不是本地图片）
var cropper
var image = document.getElementById('phtotoperson');
 cropper = new Cropper(image, {
   
	viewMode:1,
	guides:false, // 是否显示在裁剪框上方的虚线
	aspectRatio:295/413,//一寸照片裁剪尺寸
	cropBoxResizable:false //裁剪框的大小不能改变默认可以改变
	resizable:false,
	dragMode:"move",
	dragCrop:false,//不允许重新开裁剪框
	});
   vm.photo ='/file-server/files/download/'+ resp.data['DATA'][0];
   
	cropper.replace(vm.photo); 
//上个代码是根据你图片路径改变重新绘制，比如你点击上传图片之后发现上传错误想返回从新上传可能就会出现还是你第一次上传的图片。		
//因为图片裁剪下来的为base64的图片，下边的方法会将base64格式的图片转换成可上传用的图片
function dataURLtoBlob(dataurl) {
    
		var arr = dataurl.split(','),
			mime = arr[0].match(/:(.*?);/)[1],
			bstr = atob(arr[1]),
			n = bstr.length,
			u8arr = new Uint8Array(n);
		while (n--) {
   
			u8arr[n] = bstr.charCodeAt(n);
		}
		return new Blob([u8arr], {
    type: mime });
	};
	//将上传的图片命名成你希望的名称fileName表示想要的名称
	function blobToFile(theBlob, fileName){
   
		theBlob.lastModifiedDate = new Date();
		theBlob.name = fileName;
		return theBlob;
	};

利用exif.js插件解决ios手机上传竖拍照片旋转90度问题

需要在你的项目中安装exif-js
npm install exif-js --save
//判断是否需要旋转
function selectFileImage(file) {
   
			console.log(file);
			//图片方向角
			var Orientation = null;
			
			if (file) {
   
				console.log("正在上