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

今天利用canvas 實現了圖片的裁剪。具體代碼看下面。

html:

<div class="img-add imgadd video-add">
　　<img src="images/iconfont-tianjia.png" alt="" width="100%" height="auto" />
　　<input id="upvideo" type="file" name='file'/>
</div>

　　

 

首先我通過input file 獲取圖片file對象

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("文件必須為圖片");
				return false;
			}
			var fr = new FileReader();
			fr.onload = function() {
				preview = this.result;
				console.log(preview);
				location.href = 'clip_img.html?imgurl=' + preview;
			}
			fr.readAsDataURL(this.files[0]);
			console.log(this.files[0])
		})
	}    

　　獲取成功以后將圖片的base64編碼傳到裁剪頁面處理

//  接受傳過來的參數
    waitingShow();
	var params = getRequest();
	console.log(params.imgurl);
//	圖片Base64
	var path = params.imgurl;
//	設置canvas的寬高
	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中顯示
	waitingHide();
	var canvasbox = document.getElementById('canvas-box');
	var context = canvasbox.getContext('2d');
	var img=new Image();
	img.src=path;
	var imgHeight;
	var imgwidth;
	img.onload=function(){
    	context.drawImage(img,0,0);
		 imgHeight= img.height;
		 imgWidth = img.width;
		alert(imgHeight);
		alert(imgWidth);
		//	1.插件確定裁剪位置用方法一
		clipP.setClip({
			imgHeight: imgHeight + 45,
			qiu: qiu,
			clip: clip,
			w: w,
			h: h
		});	
	}
	
//	2.確定裁剪位置用方法二
//	var borderLeft,borderTop;
//	var qiu = document.getElementById('qiu');
//  var clip = document.getElementById('clip');
//  clip.addEventListener('touchstart', function(event) {
//  	event.stopPropagation();
//  	var touch = event.targetTouches[0];
//    	borderLeft = touch.pageX - clip.offsetLeft;
//    	borderTop = touch.pageY - clip.offsetTop;
//  });
//  clip.addEventListener('touchmove', function(event) {
//  	event.stopPropagation();
//		var touch = event.targetTouches[0];
//		var left = touch.pageX - borderLeft;
//    	var top = touch.pageY - borderTop;
//    	var clipWidth = parseInt(clip.getAttribute('data-k'));
//    	var clipLeft = parseInt(clip.style.left);
//    	var clipTop = parseInt(clip.style.top);
//    	
//    	console.log('left'+ left);
//    	console.log('clipwidth'+clipWidth);
//    	console.log('displayWidth'+displayWidth);
//    	var maxleft = parseInt(imgWidth) - clipWidth;
//    	console.log('maxleft'+ maxleft);
//    	if(left < 0) {
//	      clip.style.left = '0px';
//	      clip.setAttribute('data-l', 0);
//	    } else if(left >= maxleft) {
//	      clip.style.left = maxleft + 'px';
//		  console.log(maxleft);
//	      clip.setAttribute('data-l', maxleft + 'px');
//	    } else {
//	      clip.style.left = left + 'px';
//	      clip.setAttribute('data-l', left);
//	    }
//	    
//	    //top
//	    if(top <= 45) {
//	      clip.style.top = '45px';
//	      clip.setAttribute('data-t', 45);
//	    } else if(top > imgHeight - clipWidth + 45) {
//	      clip.style.top = imgHeight - clipWidth + 45 + 'px';
//	      clip.setAttribute('data-t', imgHeight - clipWidth + 45 + 'px');
//	    } else {
//	      clip.style.top = top + 'px';
//	      clip.setAttribute('data-t', top);
//	    }
//  });
    
//	保存截取圖片
	mui('#header').on('tap', '#save', function(){
//		var x = clip.getAttribute('data-l');
//		var y = clip.getAttribute('data-t');
//		var width = clip.getAttribute('data-k');
//		x = parseInt(x);
//		y = parseInt(y);
//		width = parseInt(width);
//		插件用法
		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-45,width,height);
//		canvas 裁剪圖片(復制)
		var imgData = context.getImageData(x,y,width,height);
		cxt2.putImageData(imgData,0,0);
		console.log(canvas2.toDataURL());
//		轉成base64
		var newurl = canvas2.toDataURL("image/png");
		// 將裁剪的圖片返回到上一頁面
		window.location.href = 'red_packet_send.html?newurl='+ newurl;
		
	});