cropper 裁剪上传

文本内容

	<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.7/cropper.min.js"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.7/cropper.css" />
	<div class="box"  onclick="selectImageBindtap()">
		<img id="image" src="">
	</div>
	<div class="box1">
		<img class="img" src="" alt="">
	</div>
	<input
		type="file"
		id="image1"
		style="display:none"
		value="aaa"
		onchange="imgChange(this)">
	<button onclick="cropperBindtap()">裁剪</button>
	<button onclick="reset()">重置</button>

简单修饰

	.box {
		width: 600px;
		min-height: 300px;
		background: rgba(0, 0, 0, .3);
	}

	#image, .img {
		display: block;
		max-width: 100%;
	}

	.box1 {
		width: 300px;
	}

相关js

	var cropper;
	var image = document.getElementById('image');
	function selectImageBindtap () {
		console.log(1)
		// $('.image1').val('');
		$('#image').attr('src', '');
		console.log($('#image1'));
		$('#image1').click()
	};
		function imgChange (img) {
			console.log(img);
		console.log(img.files)
		var reader = new FileReader();
		reader.readAsDataURL(img.files[0]);
		reader.onload = function(e) {
			var imgBase64Data = e.target.result;
			console.info(imgBase64Data);
			
			$('#image').attr('src', imgBase64Data);
			cropperFun(imgBase64Data);
		}
	}
	
	function cropperFun(imgBase64Data) {
		
		
		console.log(image);
		cropper = new Cropper(image, {
			viewMode:1, // 定义裁剪器的视图模式，默认值是0，0 ：裁剪框可以在画布外展开， 1，2，3将裁剪框限制为画布大小，2或3将画布限制到容器。 2.限制最小画布尺寸以适应容器。如果画布与容器比例不同，则最小画布的其中一个维度被额外的空格包围。
			dragMode:'none', // 定义裁剪器的拖动模式，default: 'crop', 'crop': 创建一个新的裁剪框  'move',移动canvas  'none',什么也不做
			initialAspectRatio: 1,
			// aspectRatio: 1, // 设置画布宽高比例  设置裁剪框的宽高比，默认情况下，为空闲比例（NaN）。
			preview: '.before', // 预览    type: String(jQuery selector),default: '',为预览添加额外的元素（容器）   注意：最大宽度（高度）是预览容器的初始宽度（高度）。  如果设置了aspectRatio选项，请确保以相同的宽高比设置预览容器。  如果预览没有正确显示，请给预览容器设overflow:hidden   
			background: true,  //  显示容器的网格背景  type：Boolean,default: true
			autoCropArea: 0.6,  //  介于0和1之间的数字，定义自动裁剪区域的大小（百分比）  type： Number,默认值： 0.8（80%）的图像
		})
		image.cropper.replace(imgBase64Data);
	}
	

	cropperBindtap = function () {
		let baseUrl = image.cropper.getCroppedCanvas({
			imageSmoothingQuality: 'high'
		}).toDataURL('image/jpeg')

		$('.img').attr('src', '');
		$('.img').attr('src', baseUrl);

		dataURLtoFile(baseUrl, 'asdasdas')
	}

	function dataURLtoFile (baseUrl, fileName) {
		var arr = baseUrl.split(','), // 地址
			mime = arr[0].match(/:(.*?);/)[1]; // 文件类型
		var  extension = mime.split('/')[1]; // 文件后缀

		var bstr = atob(arr[1]),
			n = bstr.length,
			u8arr = new Uint8Array(n);
		while (n--) {
			u8arr[n] = bstr.charCodeAt(n);
		}

		return new File([u8arr], fileName + '.' + extension, { type: mime });
	}

裁剪前

裁剪后