小程序自定义相机，canvas实现图片裁剪功能

最近在写小程序项目，需要将拍摄的照片裁剪，去掉多余的部分。

说说本人遇到的bug，一开始在编辑器上测试，没有问题，后面真机调试或预览模式，裁剪的照片坐标都有问题，找了很久才发现是像素的原因，所以在写的时候，一定要特别注意“设备像素比”

重点一定要计算像素比，不然会得不到想要的效果.

该项目主要用于实现下图功能

wxml代码

<cover-view class="lary-top" style="height:{
  {info.statusBarHeight}}px;"></cover-view>
<camera class="camera-photo" frame-size="small" device-position="{
  {devBack}}" flash="off" binderror="error" style="width:{
  {info.windowWidth}}px;height:{
  {info.windowHeight}}px;top:{
  {info.statusBarHeight}}px">
	<cover-view class="page-flex" style="width:{
  {info.windowWidth}}px; height:{
  {info.windowHeight}}px;">
		<cover-view style="height:{
  {info.windowHeight}}px;" class="page-mask page-mask-lr"></cover-view>
		<cover-view class="page-content" style="height:{
  {info.windowHeight}}px;">
			<cover-view class="page-mask" style="height:{
  {convasY-40}}px;"></cover-view>
			<cover-view style="width:{
  {canvasWidth}}px; height:{
  {canvasHeight}}px;margin:auto"></cover-view>
			<cover-view class="page-mask tackPhoto" style="height:{
  {convasY+40}}px">
                <cover-view class="confirm-photo" bindtap="takePhoto">确定</cove