Taro图片裁剪

添加页面

添加页面需要在app.js中配置config下的pages,添加你的页面所在位置即可。详情可参见微信官方文档

调用相机接口实现拍照功能

要使用微信的相机组件，需要先创建一个上下文CameraContext对象。

Taro.createCameraContext()//返回值是一个CameraContext对象

拍照函数

takePhoto=()=> {
    let { ctx} = this.state;//获取CameraContext对象
      ctx.takePhoto({
        quality: "high",
        success: (res) => {
           console.log(res.tempImagePath);//拍照成功后传回的照片路径
          Taro.redirectTo({
            url: `../copper/index?src=${res.tempImagePath}`//带照片参数跳转页面
          })

        },
        fail: (e) => {
          console.log(e);
        }
      })

  }

在render函数中返回一个camera组件,并为其中的拍照按钮添加点击拍照事件

return (
        <View className='view'>
           <Camera   className='camera'  flash='off'>
              <CoverView class='cover-1' onClick={this.takePhoto} >
              </CoverView>
            </Camera>
        </View>
    )

camera组件的主要属性方法参见微信官方文档-camera

Canvas

在实现图片裁剪功能时运用到原生组件Canvas（画布）,主要用到的函数有：

创建 canvas 的绘图上下文 CanvasContext 对象

const ctx=Taro.createCanvasContext('myCanvas')

绘制图像到画布

ctx.drawImage(imageResource, dx, dy, dWidth, dHeight)//dx是

将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中。

ctx.draw()

把当前画布指定区域的内容导出生成指定大小的图片。（在 draw() 回调里调用该方法才能保证图片导出成功）

Taro.canvasToTempFilePath({
     x: 100,//指定的画布区域的左上角横坐标
     y: 200,//指定的画布区域的左上角纵坐标
     width: 50,//指定的画布区域的宽度
     height: 50,//指定的画布区域的高度
     destWidth: 100,//输出的图片的宽度
     destHeight: 100,//输出的图片的高度
     canvasId: 'myCanvas',//画布标识，传入 canvas 组件的 canvas-id
     success(res) {//接口调用成功的回调函数
       console.log(res.tempFilePath)
    },
    fail(){
         console.log(res.tempFilePath)
     }
})

微信小程序转Taro

微信原生小程序转 Taro 的操作非常简单，首先必须安装使用 npm i -g @tarojs/cli 安装 Taro 命令行工具，其次在命令行中定位到小程序项目的根目录，根目录中运行：

 taro convert

即可完成转换。转换后的代码保存在根目录下的 taroConvert 文件夹下。你需要定位到 taroConvert 目录执行 npm install 命令之后就可以使用 taro build 命令编译到对应平台的代码。转换后的页面看起来就像普通的 Taro 组件，最重要的区别就在于 @withWeapp() 这个装饰器，你可以将它理解为转换代码的运行时， @withWeapp() 会增加一些原来 Taro 没有方法和属性，例如：

this.setData

转换后的 this.setData 的 API 相当于小程序的 this.setData 的 polyfill，他和 this.setState 最大的区别就在于，this.setData 之后 data 的数据是同步更新，而渲染是异步更新，而 setState 两者都是异步的。更多convert相关参见Taro文档-微信小程序转Taro

Taro图片裁剪