| 
						
						
							
								
							
						
						
					 | 
				
				 | 
				
					@ -77,14 +77,14 @@ Page({ | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					      _image.initialHeight = _src.height | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					    } | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					    // 控制图片在屏幕居中
 | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					    _image.initialX = (systemInfo.windowWidth - _image.initialWidth) >> 1 | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					    _image.initialY = (systemInfo.windowHeight - _image.initialHeight) >> 1 | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					    _image.initialX = 0//(systemInfo.windowWidth - _image.initialWidth) >> 1
 | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					    _image.initialY = 0//(systemInfo.windowHeight - _image.initialHeight) >> 1
 | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					    console.log(JSON.stringify(_image)) | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					    // 定义方框的位置和尺寸
 | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					    let _cropBorder = {} | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					    _cropBorder.size = systemInfo.windowWidth * 0.8 | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					    _cropBorder.x = (systemInfo.windowWidth - _cropBorder.size) >> 1 | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					    _cropBorder.y = (systemInfo.windowHeight - _cropBorder.size * (4/3)) >> 1 | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					    _cropBorder.y = (systemInfo.windowHeight - _cropBorder.size) >> 1 | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					    that.setData({ | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					      src: _src, | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					      image: _image, | 
				
			
			
		
	
	
		
			
				
					| 
						
							
								
							
						
						
							
								
							
						
						
					 | 
				
				 | 
				
					@ -164,7 +164,7 @@ takePhoto() { | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					    // 画方框的外框
 | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					    this.context.setStrokeStyle('white') | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					    // 往外画大一圈,这样在canvas上填充图片的时候框线就不会变细啦
 | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					    this.context.strokeRect(cropBorder.x - 1, cropBorder.y - 1, cropBorder.size + 2, cropBorder.size * (4/3) + 2) | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					    this.context.strokeRect(cropBorder.x - 1, cropBorder.y - 1, cropBorder.size + 2, (cropBorder.size * (4/3)) + 2) | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					    this.context.draw() | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					  }, | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					  /** | 
				
			
			
		
	
	
		
			
				
					| 
						
							
								
							
						
						
							
								
							
						
						
					 | 
				
				 | 
				
					@ -230,13 +230,13 @@ takePhoto() { | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					    let srcY = (cropBorder.y - image.curY - 120 / 750 * that.data.windowWidth) / curImageHeight * src.height | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					    // 方框区域映射到源图片中的尺寸
 | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					    let srcWidth = cropBorder.size / curImageWidth * src.width | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					    let srcHeight = cropBorder.size / curImageHeight * src.height | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					    let srcHeight = (cropBorder.size * (4/3)) / curImageHeight * src.height | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					    console.log('srcX = ' + srcX + ', srcY = ' + srcY + ', srcWidth = ' + srcWidth + ', srcHeight = ' + srcHeight + ', cropX = ' + cropBorder.x + ', cropY = ' + cropBorder.y + ', cropSize = ' + cropBorder.size) | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					    // 绘制图片不要透明啦,不然会看到重影
 | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					    this.context.setFillStyle('rgba(0,0,0,1)') | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					    // 鉴于尺寸的精确度,方框内图片的覆盖在y方向会有微微的偏移,
 | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					    // 但是一旦截图就返回上一页了,强迫症患者没有后悔的余地。
 | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					    this.context.drawImage(src.path, srcX, srcY, srcWidth, srcHeight, cropBorder.x, cropBorder.y, cropBorder.size, cropBorder.size * (4/3)) | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					    this.context.drawImage(src.path, srcX, srcY, srcWidth, srcHeight, cropBorder.x, cropBorder.y, cropBorder.size, cropBorder.size) | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					    // 这里绘图一定要有回调,不然图片还没绘制完成就截图那就GG了
 | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					    this.context.draw(true, function(res) { | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					      wx.canvasToTempFilePath({ | 
				
			
			
		
	
	
		
			
				
					| 
						
							
								
							
						
						
						
					 | 
				
				 | 
				
					
  |