关于使用image-clip进行图片裁剪

在项目过程中，有要求在移动端对图片进行拍照或者从相册选取上传，同时对图片进行裁剪，实现过程如下。

1.html：

<img id="pic" style="width: 150px;"/>
<!-- 图片裁剪 -->
<div class="clip-content">
	<div class="img-clip"></div>
	<nav class="clip-action nav-bar nav-bar-tab">
		<a class="tab-item" id="btn-reload">
			<span class="mui-icon mui-icon-arrowleft tab-icon"></span>
			<span class="tab-label hidden">取消</span>
		</a>
		<a class="tab-item " id="btn-rotate-anticlockwise">
			<span class="mui-icon mui-icon-refreshempty tab-icon rotate90"></span>
			<span class="tab-label hidden">逆时针旋转</span>
		</a>
		<a class="tab-item " id="btn-rotate-clockwise">
			<span class="mui-icon mui-icon-refreshempty tab-icon"></span>
			<span class="tab-label hidden">顺时针旋转</span>
		</a>
		<a class="tab-item" id="btn-verify">
			<span class="mui-icon mui-icon-checkmarkempty tab-icon"></span>
			<span class="tab-label hidden">确定</span>
		</a>
	</nav>
</div>
<!-- 图片裁剪 -->

2.引用相关css、js文件。链接：https://download.youkuaiyun.com/download/qq_42449688/90518764

3.js:

// 图片上传 裁剪 start
var page;
page = {
	imgUp: function() {
		var m = this;
		plus.nativeUI.actionSheet({
			cancel: "取消",
			buttons: [{
					title: "拍照"
				},
				{
					title: "从相册中选择"
				},
			]
		}, function(e) { //1 是拍照  2 从相册中选择
			switch(e.index) {
				case 1:
					appendByCamera();
					break;
				case 2:
					appendByGallery();
					break;
			}
		});
	}
	//摄像头
}

// 拍照添加文件
function appendByCamera() {
	plus.camera.getCamera().captureImage(function(e) {
		console.log(e);
		plus.io.resolveLocalFileSystemURL(e, function(entry) {
			var path = entry.toLocalURL();
			getBase64(path);
		}, function(e) {
			mui.toast("读取拍照文件错误：" + e.message);
		});

	});
}
// 从相册添加文件
function appendByGallery(indeEle) {
	plus.gallery.pick(function(path) {
		console.log(path,'indexEle-相册')
		getBase64(path);
	});
}
function getBase64(imgUrl) {
	window.URL = window.URL || window.webkitURL;
	var xhr = new XMLHttpRequest();
	xhr.open("get", imgUrl, true);
	// 至关重要
	xhr.responseType = "blob";
	xhr.onload = function () {
		if (this.status == 200) {
			//得到一个blob对象
			var blob = this.response;
			// 至关重要
			let oFileReader = new FileReader();
			oFileReader.onloadend = function (e) {
				// 此处拿到的已经是 base64的图片了
				let base64 = e.target.result;
				console.log(base64,'---------base64')
				loadImg(base64);
			};
			oFileReader.readAsDataURL(blob);
		}
	}
	xhr.send();
}
function loadImg(b64) {
	$('.clip-content').css('z-index','99');
	var img = new Image();
	img.src = b64;

	img.onload = function() {
		EXIF.getData(img, function() {
			var orientation = EXIF.getTag(this, 'Orientation');
			
			cropImage && cropImage.destroy();
			cropImage = new ImageClip({
				container: '.img-clip',
				img,
				// 0代表按下才显示，1恒显示，-1不显示
				sizeTipsStyle: 0,
				// 为1一般是屏幕像素x2这个宽高
				// 最终的大小为：屏幕像素*屏幕像素比（手机中一般为2）*compressScaleRatio
				compressScaleRatio: 1.1,
				// iphone中是否继续放大：x*iphoneFixedRatio
				// 最好compressScaleRatio*iphoneFixedRatio不要超过2
				iphoneFixedRatio: 1.8,
				// 减去顶部间距，底部bar,以及显示间距
				maxCssHeight: window.innerHeight - 100 - 50 - 20,
				// 放大镜捕获的图像半径
				captureRadius: 30,
				// 是否采用原图像素（不会压缩）
				isUseOriginSize: false,
				// 增加最大宽度，增加后最大不会超过这个宽度
				maxWidth: 0,
				// 是否固定框高，优先级最大，设置后其余所有系数都无用直接使用这个固定的宽，高度自适应
				forceWidth: 0,
				// 同上，但是一般不建议设置，因为很可能会改变宽高比导致拉升，特殊场景下使用
				forceHeight: 0,
				// 压缩质量
				quality: 0.92,
				mime: 'image/jpeg',
			});

			// 6代表图片需要顺时针修复（默认逆时针处理了，所以需要顺过来修复）
			switch (orientation) {
				case 6:
					cropImage.rotate(true);
					break;
				default:
					break;
			}

		});
	};
}


initListeners();
function initListeners() {
	document.querySelector('#pic').addEventListener('click', function() { //点击图片调用
		page.imgUp();
	});
	document.querySelector('#btn-reload').addEventListener('click', function() {
		cropImage && cropImage.destroy();
	});
	document.querySelector('#btn-rotate-anticlockwise').addEventListener('click', function() {
		cropImage.rotate(false);
	});
	document.querySelector('#btn-rotate-clockwise').addEventListener('click', function() {
		cropImage.rotate(true);
	});

	document.querySelector('#btn-verify').addEventListener('click', function() {
		cropImage.clip(false);
		imgData = cropImage.getClipImgData();
		console.log(imgData,'-------裁剪完成后的图片，格式为base64')
	});
}
// 图片上传 裁剪 end