h5實現圖片的裁剪（單頁面）

html:

<!--單張圖片-->
<div id="onephoto" style="display: block;">
	<div class="goods-title">紅包圖片</div>
	<div class="img-all">
		<div class="img-add imgadd">
	        	<img src="images/iconfont-tianjia.png" alt="" width="100%" height="auto" />
			<input class="upphoto" type="file" name='file' accept="image/jpg,image/jpeg,image/png" />
		</div>
	</div>
</div>

　　

<!--圖片裁剪-->
<div class="clip-img mui-hidden">
	<header class="mui-bar mui-bar-nav" id="header">
	    <h1 class="mui-title seller-name">圖片裁剪</h1>
	    <a class="mui-pull-left icon-back clip-hidden"></a>
	    <a class="mui-pull-right font-16px" id="save">保存</a>
	</header>
				
        <div id="clip" data-k='200' data-l="0" data-t="45" style="left: 0px; top: 45px;"></div>
        <div id="qiu"></div>
        <canvas id="canvas-box" width="100%" height="100%" style="margin-top: 0px;"></canvas>
</div>    

css

* {
	/*overflow: hidden;*/
}

body {
	/*overflow: hidden;*/
}

.clip-img img {
	width: 100%;
	height: auto;
}

.img {
	padding-top: 45px;
}

#clip {
	position: absolute;
	top: 45px;
	left: 0;
	border: 1px solid #f00;
	overflow: hidden;
}

#qiu {
	width: 20px;
	height: 20px;
	border-radius: 20px;
	background: #f00;
	position: absolute;
	overflow: hidden;
}

#canvas-box {
	margin-top: 45px;
}

js

	// 圖片上傳
	var upphoto = document.querySelectorAll('.upphoto');
	for(var i = 0; i < upphoto.length; i++) {
		upphoto[i].addEventListener('change', function() {
			console.log('點擊了上傳圖片')
			var file = this.files[0];
			if(!/image\/\w+/.test(file.type)) {
				mui.toast("文件必須爲圖片");
				this.outerHTML = this.outerHTML;
				return false;
			}
			var fr = new FileReader();
			fr.onload = function() {
				preview = this.result;
				console.log(preview);
				document.querySelector('.clip-img').classList.remove('mui-hidden');
				openClipPage(preview);
			}
			fr.readAsDataURL(this.files[0]);
			console.log(this.files[0])
		}, false)
	}

　　

//***********************圖片裁剪***************************
	//	設置canvas的寬高
	var context;
	var displayHeight = window.screen.height - 45 + 'px';
	var displayWidth = window.screen.width + 'px';
	console.log(displayHeight);
	console.log(displayWidth);
	document.getElementById('canvas-box').setAttribute('width', displayWidth);
	document.getElementById('canvas-box').setAttribute('height', displayHeight);
	//	圖片在canvas中顯示
	function openClipPage(path) {
		var canvasbox = document.getElementById('canvas-box');
		context = canvasbox.getContext('2d');
		var img = new Image();
		img.src = path;
		var imgHeight;
		var imgWidth;
		img.onload = function() {
			imgHeight = img.height;
			imgWidth = img.width;
			var proportion = getProportion(imgWidth,window.screen.width);
			context.clearRect(0, 0, window.screen.width, window.screen.height);    
			context.drawImage(img, 0, 0,imgWidth,imgHeight,0,0,window.screen.width,imgHeight/proportion);
			//	1.插件肯定裁剪位置用方法一
			clipP.setClip({
				imgHeight: imgHeight/proportion + 45,
				qiu: qiu,
				clip: clip,
				w: 90,
				h: 140
			});
		}
	}

	$.tapHandler({
		selector: '#save',
		callback: function() {
			//		插件用法
			var imgInfo = clipP.getClip()
			console.log(JSON.stringify(imgInfo));
			var x = imgInfo.left;
			var y = imgInfo.top;
			var width = imgInfo.width;
			var height = imgInfo.height
			//		得到裁剪的圖片(建立一個canvas,將裁剪的圖片複製上去)
			var canvas2 = document.createElement("canvas");
			var cxt2 = canvas2.getContext("2d");
			canvas2.width = width;
			canvas2.height = height;
			var imgData = context.getImageData(x, y, width, height);
			cxt2.putImageData(imgData, 0, 0);
			console.log(canvas2.toDataURL());
			//		轉成base64
			var newurl = canvas2.toDataURL("image/png");
			appendFile(sellerId, newurl);  //上傳圖片函數（省略）

		}
	});

　　　　　　// 計算圖片和顯示屏的比例
　　　　　　function getProportion(imgW, displayW) {
　　　　　　　　return imgW / displayW;
　　　　　　}

 

　　　　　　補充： urlbase64 轉 file 對象　　　　　　

　　　　function ba64toFile(fileName, dataUrl) {

　　　　　　var blob = dataURLtoBlob(dataUrl);
　　　　　　var fileBody = new File([blob], fileName);

　　　　　　return fileBody;
　　　　}

　　

　　　　function dataURLtoBlob(dataUrl) {
　　　　　　var arr = dataUrl.split(',');
　　　　　　var mime = arr[0].match(/:(.*?);/)[1];
　　　　　　var bstr = atob(arr[1]);
　　　　　　var n = bstr.length;
　　　　　　var u8arr = new Uint8Array(n);
　　　　　　while (n--) {
　　　　　　　　u8arr[n] = bstr.charCodeAt(n);
　　　　　　}
　　　　　　return new Blob([u8arr], {
　　　　　　type: mime
　　　　　　});
　　　　}